如何用js实现图片下载_js下载图片-优快云博客

本文链接：https://blog.youkuaiyun.com/jz_jingzhen/article/details/116491397

本文介绍了如何使用JavaScript解决图片下载的跨域问题，通过canvas生成Base64编码实现下载。在点击图标时，利用onload事件、canvas绘制图片并转换为dataURL，然后创建a标签模拟点击下载。注意，当download属性值过长可能导致下载失败，应确保文件名简洁。此外，此方法还规避了直接使用a标签下载时必须与网站域名一致的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用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”，来告诉我们的浏览器所下载的是什么格式的文件。