vue 如何根据后台返回来的图片url进行图片下载

最新推荐文章于 2024-10-10 15:08:21 发布

weixin_43645980

最新推荐文章于 2024-10-10 15:08:21 发布

阅读量2.1k

点赞数 1

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/qq_39748755/article/details/105770631

版权

vue 如何根据后台返回来的图片url进行图片下载

传送门儿

downloadByBlob(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);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    download(href, name) {
      let eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    }