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がドメインを越えた画像を描く処理は同じで、もう述べません.