canvas绘制跨域图片&&点击下载图片

最近遇到个问题，就是在图片旁边有个点击下载按钮，但是这个图片的来源地址不确定。

IE上可以使用(新版本可能不行，没试过):window.navigator.msSaveBlob(blob, name + ".jpg");

火狐直接：window.location.href = url;

以上都不符合主流浏览器

 

目前知道：

1.canvas可以绘制图片（但是不允许跨域）

2.添加download属性的a链接可以触发下载(IE浏览器例外);

 

那如果我们能让图片服务器直接返回blob也就是所谓的数据流，是不是就可以避免跨域了呢？

可以。

但是，服务器同样还是需要配置cors："Access-Control-Allow-Origin: *"，我们才可以使用ajax请求到数据

 

最终代码如下:

 open (url) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function () {
         console.log("this.response",this.response)
          var url = URL.createObjectURL(this.response);
          console.log(url)
          var img = new Image();
          img.onload = function () {
              // 此时你就可以使用canvas对img为所欲为了
              var a = document.createElement("a");
              a.download = name;
              a.href =url;
              a.click();
              // 图片用完后记得释放内存
              URL.revokeObjectURL(url);
          };
          img.src = url;
      };
      xhr.open('GET', url, true);
       xhr.responseType = 'blob';
      xhr.send();
    },

canvas绘制跨域图片的处理方式雷同，不再叙述。