前端实现图片下载的方法

​ 而且还有一点是：在任何方案下，前端都无法绕过跨域的限制，所以需要图片所在的服务器对你当前域名开放权限，否则是无法下载的，最多能做到查看图片。

​ 最终解决方案为：跟需求方和产品沟通后，决定修改页面逻辑，提示用户长按保存图片，从而实现下载。当然如果哪位大佬还有跟好的方案能够实现在移动端的点击下载，那也欢迎在评论区多多指教分享。

​ 当然，我前期所做的各种方案的探索，自然也不是无用功，这些方案在PC端可以正常使用，只是在移动端会出现各种各样的问题，也正是因此有了这篇博客，分享多种图片下载的方法。

​ 我的业务中想下载的图片，放置在另一台资源服务器下，不在同一个域名下，遂放弃该方案。

实现代码：

<a href="https://example.com/image.jpg" download="image.jpg">下载图片a>
1

实现代码：

function download(item) {
  // 创建图片Image对象
  let image = new Image();
  // 以CORS的方式去请求这张图片 服务端需要设置CORS进行配合
  image.setAttribute("crossOrigin", "anonymous");
  // 图片加载完成后进行操作
  image.onload = function () {
    // 生成canvas图像
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    // 得到图片的base64编码数据
    let url = canvas.toDataURL("image/png"); 
    // 生成一个a元素
    let a = document.createElement("a"); 
     // 创建一个单击事件
    let event = new MouseEvent("click");
    // 设置download属性 即下载后的文件名称
    a.download = item.diplomaCode || "photo"; 
    // 将生成的base64编码数据设置为a.href属性
    a.href = url; 
    // 触发a的单击事件 进行下载
    a.dispatchEvent(event); 
  };
  // 设置图片地址 开始加载
  image.src = item.imgUrl;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

​ 如果想要获取blob类型的数据，则只需要前端配置ajax请求的responseType属性即可，无需后端配合。如果想要获取base64格式的数据，则需要后端进行配合修改数据，前端无需做特别配置。

实现代码：

// 获取blob类型的数据进行下载
function download2(item) {
  // 创建ajax请求
  var xhr = new XMLHttpRequest();
  xhr.open("GET", item.imgUrl, true);
  // 设置请求的响应数据为 blob 类型
  xhr.responseType = "blob";
	// 请求成功后
  xhr.onload = function () {
    if (this.status === 200) {
      // 将响应数据转换成blob对象
      var blob = new Blob([this.response], { type: "image/jpeg" });
      // 将blob转成一个url对象
      var url = URL.createObjectURL(blob);
      // 创建a标签并进行点击下载
      var a = document.createElement("a");
      a.href = url;
      a.download = item.diplomaCode || "photo";
      a.click();
      // 清除临时的url对象 解放内存
      URL.revokeObjectURL(url);
    }
  };
	// 发送请求
  xhr.send();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

实现代码：

<img src="https://..." alt="" id="ZS1" />

<script>
function download3() {
  // 通过依赖根据图片渲染的dom元素生成base64格式的图片
  domtoimage.toPng(document.querySelector(`#ZS1`)).then((dataUrl) => {
    // 创建一个a元素
    let a = document.createElement("a"); 
    // 设置download属性
    a.download = "xkw证书"; 
    // 将生成的base64设置为a.href属性
    a.href = dataUrl; 
    // 点击下载
    a.click();
  });
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17