如何用js实现图片下载

如何用js实现图片下载？？？需求场景：点击图标，实现图片下载。html代码：js函数：坑：这里是使用canvas生成base64码进行图片下载，因为直接使用a标签进行图片下载，会有一个跨域问题，图片域名需要和我们的网站域名保持一致，如果不一致的话，则无法下载成功。但是使用canvas生成base64码进行下载时，会有一个问题，当a标签的download属性过长（传入的name过长）会导致图片下载失

fail-request

9714人浏览 · 2021-05-07 14:18:31

fail-request · 2021-05-07 14:18:31 发布

如何用js实现图片下载？？？

需求场景：点击图标，实现图片下载。
在这里插入图片描述
html代码：
js函数：

downLoadImg(imgsrc, name) {
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL("image/png",0.7); //得到图片的base64编码数据
    var a = document.createElement("a"); // 生成一个a元素
    var event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name?name+'.png':"photo.png"; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},

在这里插入图片描述

坑：
这里是使用canvas生成base64码进行图片下载，因为直接使用a标签进行图片下载，会有一个跨域问题，图片域名需要和我们的网站域名保持一致，如果不一致的话，则无法下载成功。但是使用canvas生成base64码进行下载时，会有一个问题，当a标签的download属性过长（传入的name过长）会导致图片下载失败，所以我们需要需要写成a.download = name + “.png”，来告诉我们的浏览器所下载的是什么格式的文件。