js实现浏览器强制下载图片

enjoycodeing

于 2021-10-11 15:46:55 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： html5 html javascript

本文链接：https://blog.youkuaiyun.com/qq_36697004/article/details/120704849

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个JavaScript函数，它利用Image对象和Canvas技术，解决跨域问题并实现图片的强制下载，通过Base64编码生成可供下载的链接。

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

强制下载图片

  function downloadImg(imgsrc, name) {
    // 强制下载图片
    const image = new Image();
    image.src = imgsrc;
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous');
    // eslint-disable-next-line func-names
    image.onload = function () {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0, image.width, image.height);
      const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
      const a = document.createElement('a'); // 生成一个a元素
      a.download = name; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.click();
    };
  }