html <img src=...>が動作しますが、JSイメージの読み込み原因CORSエラー

Question

js + jqueryで画像エディタを作成します。最初のステップでは、ユーザーに画像URLを要求します。しかし、私は、JS内で画像データをロードしようとすると（base64画像URIを生成するために）問題が発生します。私はコンソールでエラーが発生します：… has beeb blocked by CORS policy: Access-Control-Allow-Origin …。しかし、私はなぜだろうか？ htmlファイルで作成した場合（画像ホットリンク）：

<img src="https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg" /> 

ブラウザに画像がありません。ここでは、同じ画像のためのCORSの問題を投げる私のJSコードは次のとおりです。

function downloadFile(url) { 
    console.log({url});  
    var img = new Image(); 
    img.onload = function() { 
     console.log('ok'); 
     // never execute because cors error 
     // … make base64 uri with image data needed for further processing 
    }; 

    img.crossOrigin = "Anonymous"; 
    img.src = url; 
} 

そこで質問です - （HTMLタグ負荷それのような）画像をロードし、CORSの問題を回避BASE64のURLに変換するJSを強制する方法？

https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg

Answer 1

私は私の自己（JS ES6）見つかった溶液にしてみてくださいだけ-部分的に見つけます。 imgをCORSをサポートしていないsrcからcanvasに読み込むことはできますが、ブラウザのスイッチキャビナスはtaint modeになります。toDataURL（およびその他のコンテンツへのアクセス）は許可されません。

この障害を克服するには、CORSを「オン」にするプロキシサーバーを作成し、指定されたURLの画像をダウンロードしてJSのアプリに送り返してください。開発のためにテスト用に使用できるフリーサーバhttps://cors-anywhere.herokuapp.comがいくつか見つかりました。

loadImgAsBase64(url, callback) 
{ 
    let canvas = document.createElement('CANVAS'); 
    let img = document.createElement('img'); 
    img.setAttribute('crossorigin', 'anonymous'); 
    img.src = 'https://cors-anywhere.herokuapp.com/'+url; 

    img.onload =() => 
    { 
     canvas.height = img.height; 
     canvas.width = img.width; 
     let context = canvas.getContext('2d'); 
     context.drawImage(img,0,0); 
     let dataURL = canvas.toDataURL('image/png'); 
     canvas = null; 
     callback(dataURL); 
    }; 
} 

そして、我々は、この（ES6）でそれを呼び出すことができます：：以下は、そこに与えられた画像のURLからdataUriを返すフル機能のコードは、すべてのthats

let url='https://static.pexels.com/photos/87293/pexels-photo-87293.jpeg'; 
this.loadImgAsBase64(url, (dataURL) => { console.log('imgData:',dataURL) }); 

:)（私はクロームでそれをテスト）