JavaScript-实现图片的下载(本地图片，远程图片，多个下载)

已于 2023-11-18 20:47:01 修改
阅读量3.8k 收藏 18
点赞数 10
分类专栏： JavaSrcipt 文章标签： javascript 前端
于 2023-11-18 20:44:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54140719/article/details/134481693
版权
文章介绍了如何使用JavaScript通过a标签实现本地下载，以及在处理远程资源时利用fetchAPI和Blob对象生成BlobURL进行下载。还提到处理多个下载时的注意事项，包括效率问题和释放URL对象。
摘要由CSDN通过智能技术生成

目录

一、主要步骤

二、本地下载

三、远程下载

四、多个下载

一、主要步骤

        主要通过<a/>标签来实现，将要下载的文件链接设置为href属性，将文件名设置为download属性，然后模拟点击这个链接即可触发下载。

        本文简单例举了几种下载方式，只是完成下载的任务，具体细节和精确控制还请查看官方文档。

二、本地下载

        1.本地比较简单，可以直接使用 a 标签

  • 最简单的方式是：

        herf为图片路径，download为设置下载文件名字

<a href="图片的路径" download="img.jpg">下载</a>
  • 如果不想让 a 标签显示出来，可以创建隐藏的a标签，通过其他点击事件去触发下载：

(这里 download() 函数 return 一个function是因为需要在 addEventListener 的回调函数里传递参数)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button>点击下载</button>
    <script>
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件    注意这里换成自己的路径
      bt.addEventListener('click',download('/1695208099339.jpg','img.jpg'))

      function download(url,fileName){
        return function(){
          // 创建a标签
          var link = document.createElement('a');
          // 设置a标签为不可见
          link.style.display = 'none';
          // 将a标签添加到body
          document.body.appendChild(link);
          // 设置a标签的href
          link.href = url;
          // 设置a标签的download
          link.download = fileName;
          // 模拟点击事件进行下载
          link.click();
          // 下载完成后移除a标签
          document.body.removeChild(link);          
          }
      }

    </script>
</body>
</html>

三、远程下载

  • 在开发中，我们往往获取的是服务器上的图片，得到的只有图片的url地址，此时如果继续采用上面的方法会发现无法下载，变成了预览图片。
  • 这里我们需要使用 fetch 来请求获取图片，然后将其转为 Bold 对象，通过该对象生成 Blob URL，这个url才是可以下载时使用的：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button>点击下载</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件 
      bt.addEventListener('click',download(srcList[0],'img.jpg'))
      function download(url,fileName){
        return function(){
            //图片的地址 
            fetch(url)
            // 获取 blob 对象
            .then(res=>res.blob())
            .then(blob=>{
              // 创建a标签
              var link = document.createElement('a');
              // 设置a标签为不可见
              link.style.display = 'none';
              // 将a标签添加到body
              document.body.appendChild(link);
              // 生成Blob URL并设置给a标签的href属性
              var url = window.URL.createObjectURL(blob);
              link.href = url;
              // 设置a标签的download
              link.download = fileName;
              // 模拟点击事件进行下载
              link.click();
              //下载完成后清理URL对象和a标签
              window.URL.revokeObjectURL(url);
              document.body.removeChild(link); 
            })
          }
      }

    </script>
</body>
</html>

四、多个下载

        前端下载的实际操作是由浏览器来处理的。当用户点击下载链接或者通过JavaScript触发文件下载时，浏览器会负责发起文件下载请求，并将文件保存到用户的本地计算机中。浏览器会处理文件下载的所有细节，包括网络请求、接收文件数据、保存文件等操作。

        所以一般情况下，我们要下载多个文件，只需要循环向浏览器提交下载任务就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <button>点击下载多个图片</button>
    <script>
      const srcList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        ]
      // 获取button标签
      const bt = document.querySelector('button')
      // 给button添加点击事件 
      bt.addEventListener('click',downloadMany(srcList))

      //下载多个
      function downloadMany(srcList){
          return function() {
              srcList.forEach((url,index)=>{
               //循环调用download函数下载
              download(url,index+'png')
            })
          }
      }
      //下载函数
      function download(url,fileName){
            //图片的地址 
            fetch(url)
              // 获取 blob 对象
              .then(res=>res.blob())
              .then(blob=>{
                // 创建a标签
                var link = document.createElement('a');
                // 设置a标签为不可见
                link.style.display = 'none';
                // 将a标签添加到body
                document.body.appendChild(link);
                // 生成Blob URL并设置给a标签的href属性
                var url = window.URL.createObjectURL(blob);
                link.href = url;
                // 设置a标签的download
                link.download = fileName;
                // 模拟点击事件进行下载
                link.click();
                //下载完成后清理URL对象和a标签
                window.URL.revokeObjectURL(url);
                document.body.removeChild(link); 
              })
      }

    </script>
</body>
</html>

注意：URL.createObjectURL 生成的url如果过多会有效率问题，可以在合适的时机（download后）释放掉。

hpz1223
关注
  • 10
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
网页保存图片并下载到本地 兼容IE浏览器
02-20
利用html2canvas将网页抓取成图片并下载到本地，兼容ie内核，项目需要子啊服务器运行，此demo已经做大文件下载网络错误的处理，解决了大图片或大文件下载出错
php远程图片本地化插件
12-20
在PHP开发中，远程图片本地化插件是一个重要的工具，它允许开发者将互联网上的图片资源下载到本地服务器，以便提高网站加载速度、节省带宽、防止因原图源站问题导致图片无法显示，并且可以更好地保护网站内容的完整...
js图片下载方式集合
失眠时间的博客
05-26 5572
js下载图片方式
javascript使用a标签实现文件下载
最新发布
码农键盘上的梦
04-19 2036
前端利用a标签实现文件（图片）下载，也就是教大家利用a标签或者是 window.open() 来实现下载功能。
前端每日一练：使用 JavaScript 下载图片并保存到本地的方法详解
SAXX2的博客
03-13 3699
前端每日一练：实现下载图片功能​。
HTML+JS 实现图片下载到本地
qq_33266037的博客
08-04 1760
download 属性是HTML5中新增的 标签属性。能够让我们指定浏览器下载文件时的默认名称。将download属性添加到链接上，当我们点击这个链接，download属性值里的名称会显示到弹出的下载框里，而且download属性能够强制触发下载操作。方法一：通过链接实现图片下载。
js下载图片功能
liyanfei_aring的博客
11-21 72
/ imgUrl 传入要下载的图片链接，imgName 可以自行命名下载图片名称。
JS批量下载图片
晓强的技术博客
09-17 3898
用JS在Chrome浏览器上方便的批量下载图片，程序员一定都玩过的东东。懒得写的，随用随拿，别忘了点赞。
JS——图片下载
qq812457115的博客
10-26 555
【代码】JS——图片下载。
js之 实现下载图片保存到本地
qq_38801090的博客
01-29 1349
js之 实现浏览器下载图片保存到本地。
JS下载图片保存在本地
qq_36904182的博客
05-16 4931
const imgUrl = "";// 图片链接 const a = document.createElement('a'); // 这里是将url转成blob地址， fetch(imgUrl) // 跨域时会报错 .then(res => res.blob()) .then(blob => { // 将链接地址字符内容转变成blob地址 a.href = URL.createObjectURL(blob); ..
JS实现图片下载功能
weixin_42287935的博客
04-20 7237
download (config) { const a = document.createElement('a') // 创建一个a标签 a.href = config.src // a标签的src属性赋值 if (config.target) { a.target = config.target } a.download = config.fileName // a标签的download属性赋值 document.body.appendChild
基于javascript处理二进制图片流过程详解
10-15
主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
图片上传(水印、缩略图、远程保存)源码.zip
06-19
1. **图片上传**：图片上传通常涉及到文件选择、文件预览、文件传输和服务器端验证等多个步骤。前端部分，可能使用HTML5的File API来获取用户选择的图片，然后通过Ajax或Fetch API发送到服务器。服务器端则需要处理...
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
09-05
浏览器为了提高页面加载速度和减少网络流量，会将一些静态资源（如图片、CSS、JavaScript文件等）存储在本地缓存中。当用户再次访问相同URL的资源时，浏览器会优先从缓存中读取，而不是重新向服务器请求。这在大多数...
详解用node-images 打造简易图片服务器
08-30
而对于远程图片，我们需要下载并处理后再发送。 `node-images`库允许我们轻松地调整图片尺寸，例如： ```javascript const img = images('path/to/image.jpg'); img.resize(params.w, params.h).save('path/to/...
移动端文本编辑器带图片上传，处理文本中的图片下载到本地
12-21
对于描述中提到的"处理截取图片到本地"，这可能是指在编辑器中，当用户插入网络图片时，编辑器会自动下载图片到本地，然后用本地路径替换网络URL，以确保在离线环境下仍能显示图片。这一步涉及到前端的图片下载和...
通过url下载文件或图片js
wonderfulgood的博客
03-26 663
response.msg 示例为 unzip/163/518/20240124-144926562000/7feb94adde1e45fcb634800744b4a38c.jpg。要下载图片，必须创建GET请求并将图片的URL作为请求的URL。示例为下载pdf,更换其他类型文件注意更换blob的type。2、当请求成功后，需要将响应数据保存为图片文件。1、向服务器发送HTTP请求并获取响应。
JavaScript图片下载本地
qq_40673807的博客
12-06 156
【代码】JavaScript图片下载本地。
127.0.0.1在本地实现语音聊天
07-27
可以使用一些开源的语音通信库来实现本地的语音聊天。其中一个常用的库是WebRTC，它提供了实时的语音和视频通信功能。 要在本地实现语音聊天，你需要设置一个服务器来处理音频传输和信号交换。可以使用Node.js来搭建一个简单的服务器，然后使用WebRTC库来处理音频通信。 首先，你需要安装Node.js和npm。然后，在你的项目文件夹中初始化一个新的npm项目，并安装所需的依赖项： ``` npm init npm install express socket.io webrtc ``` 接下来，创建一个简单的Express服务器，并将WebRTC和Socket.IO集成到其中： ```javascript const express = require('express'); const http = require('http'); const socketIO = require('socket.io'); const { RTCPeerConnection, RTCSessionDescription } = require('webrtc'); const app = express(); const server = http.createServer(app); const io = socketIO(server); // 设置静态文件夹 app.use(express.static(__dirname + '/public')); // 处理客户端连接 io.on('connection', socket => { console.log('新的客户端连接'); // 处理SDP交换 socket.on('sdp', message => { // 解析SDP const description = new RTCSessionDescription(message); // 创建RTCPeerConnection实例 const pc = new RTCPeerConnection(); // 设置远程SDP pc.setRemoteDescription(description); // 创建应答SDP并发送给客户端 pc.createAnswer().then(answer => { pc.setLocalDescription(answer); socket.emit('sdp', answer); }); }); // 处理ICE候选者交换 socket.on('ice', message => { // 解析ICE候选者 const candidate = new RTCIceCandidate(message); // 添加候选者到RTCPeerConnection pc.addIceCandidate(candidate); }); }); // 启动服务器 const port = process.env.PORT || 3000; server.listen(port, () => { console.log(`服务器运行在端口 ${port}`); }); ``` 上述代码创建了一个简单的Express服务器，并使用Socket.IO处理客户端连接。当客户端发送SDP（Session Description Protocol）和ICE（Interactive Connectivity Establishment）消息时，服务器会处理这些消息并进行信号交换。 最后，你需要创建一个简单的HTML页面来实现语音聊天的前端界面。在public文件夹下创建一个index.html文件，并添加以下代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>语音聊天</title> </head> <body> <h1>语音聊天</h1> <button id="startButton">开始通话</button> <button id="endButton">结束通话</button> <script src="/socket.io/socket.io.js"></script> <script> const startButton = document.getElementById('startButton'); const endButton = document.getElementById('endButton'); startButton.addEventListener('click', () => { // 创建RTCPeerConnection实例 const pc = new RTCPeerConnection(); // 获取本地音频流 navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { // 将本地音频流添加到RTCPeerConnection stream.getTracks().forEach(track => { pc.addTrack(track, stream); }); // 发送SDP给服务器 pc.createOffer().then(offer => { pc.setLocalDescription(offer); socket.emit('sdp', offer); }); }); // 处理远程SDP socket.on('sdp', message => { pc.setRemoteDescription(new RTCSessionDescription(message)); }); // 处理ICE候选者 pc.onicecandidate = event => { if (event.candidate) { socket.emit('ice', event.candidate); } }; }); endButton.addEventListener('click', () => { // 关闭RTCPeerConnection pc.close(); }); </script> </body> </html> ``` 上述代码创建了一个简单的HTML页面，其中包含开始通话和结束通话的按钮。当用户点击开始通话按钮时，会请求获取本地音频流，并将音频流添加到RTCPeerConnection中。然后，创建SDP并发送给服务器进行信号交换。当服务器返回应答SDP时，将其设置为远程SDP。同时，监听RTCPeerConnection的ICE候选者事件，并将候选者发送给服务器。 最后，你可以通过运行`node server.js`命令来启动服务器，并在浏览器中打开`http://localhost:3000`来开始本地的语音聊天。记得在浏览器中允许访问麦克风权限。 请注意，这只是一个简单的示例代码，你可能需要根据你的需求进行更多的定制和调整。此外，还需要考虑网络连接稳定性、音频编解码、噪音处理等方面的问题来提高语音聊天的质量和稳定性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值