vue 图片下载

这里提供两种图片下载的方法

1. 直接由路径下载

 downloadIamge(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"); //得到图片的base64编码数据

      var a = document.createElement("a"); // 生成一个a元素

      var event = new MouseEvent("click"); // 创建一个单击事件

      a.download = name || "photo"; // 设置图片名称

      a.href = url; // 将生成的URL设置为a.href属性

      a.dispatchEvent(event); // 触发a的单击事件

  };

  image.src = imgsrc;

}

这种方法可以根据路径下载同源和非同源的图片 ，当然前提是你的图片能被跨域请求，这需要在服务端配置跨域请求

配置响应头

2.通过Base 64 下载图片 

downBetyIamge =(imgdata, name) =>{  //Bsae 64下载图片

              // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果

      const imgUrl = "data:image/png;base64,"+ imgdata;

      // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片

      if (window.navigator.msSaveOrOpenBlob) {

        let bstr = atob(imgUrl.split(",")[1]);

        let n = bstr.length;

        let u8arr = new Uint8Array(n);

        while (n--) {

        u8arr[n] = bstr.charCodeAt(n);

        }

        let blob = new Blob([u8arr]);

        window.navigator.msSaveOrOpenBlob(blob, name + "." + "png");

      } else {

        // 这里就按照chrome等新版浏览器来处理

        let a = document.createElement("a");

        a.href = imgUrl;

        a.setAttribute("download", name);

        a.click();

      }

}

imgdata 是请求返回的64编码 name为图片名