vue:已有图片地址，实现点击图片下载功能

JuS巨山超力霸

于 2023-01-06 15:44:14 发布

阅读量1.7k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_49623851/article/details/128580139

版权

当项目中后端返回图片地址时，前端可以利用JavaScript将图片转换为blob对象，然后创建a标签进行下载。方法包括设置image的crossOrigin属性，加载图片到canvas，绘制到canvas后转换为blob，最后通过URL.createObjectURL创建下载链接并触发下载。

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

项目中遇见后端返回了图片的地址，前段需要将图片保存到本地；

解决办法：

先用图片地址和图片名称生成blob对象，再使用a标签下载

这里写成了一个方法，传入图片链接和图片名称就好了

 //根据url和名称生成blob
    downloadPic(url, name) {
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          let Link = document.createElement("a");
          Link.download = name;
          Link.href = href;
          Link.click();
          Link.remove();
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },