CORSヘッダーでも汚染されたHTMLキャンバス

Question

イメージのデータURLを取得しようとしています。イメージはクロスオリジンのリモートサーバーWikipediaから送られてきます。私はそれをしようとするために、このJavaScriptを使用します。

# get the image 
const img = document.createElement('img') 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png' 
# don't send credentials with this request 
img.crossOrigin = 'anonymous' 
# now copy to a <canvas /> to get data URL 
const canvas = document.createElement('canvas') 
canvas.width = img.width 
canvas.height = img.height 
const ctx = canvas.getContext('2d') 
ctx.drawImage(img, 0, 0) 
canvas.toDataURL('image/jpg') 

しかし、私はこのエラーを取得しています：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exportedを。

これはCORSの問題です。サーバーがAccess-Control-Allow-Originヘッダーを設定していない場合、ブラウザーは画像から画像データを取得することを防ぎます。 しかし、奇妙なことはです。私は応答をチェックし、そのヘッダはです。だから私はなぜこれが動作していないのか分からない。ターミナルから要求を出したときの出力です（ヘッダーはChromeのdevtoolsに表示されたものと同じです）。

$ http 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png' 

HTTP/1.1 200 OK 
Accept-Ranges: bytes 
Access-Control-Allow-Origin: * 
Access-Control-Expose-Headers: Age, Date, Content-Length, Content-Range, X-Content-Duration, X-Cache, X-Varnish 
Age: 6359 
Connection: keep-alive 
Content-Disposition: inline;filename*=UTF-8''Strychnine.svg.png 
Content-Length: 11596 
Content-Type: image/png 
Date: Fri, 29 Dec 2017 21:00:31 GMT 
Etag: 223fb180fc10db8693431b6ca88dd943 
Last-Modified: Sun, 04 Sep 2016 09:13:24 GMT 
Strict-Transport-Security: max-age=106384710; includeSubDomains; preload 
Timing-Allow-Origin: * 
Via: 1.1 varnish-v4, 1.1 varnish-v4, 1.1 varnish-v4, 1.1 varnish-v4 
X-Analytics: https=1;nocookies=1 
X-Cache: cp1049 hit/4, cp2022 pass, cp4026 hit/4, cp4024 hit/3 
X-Cache-Status: hit-front 
X-Client-IP: 2606:6000:670c:f800:989:be22:e59d:3c3f 
X-Object-Meta-Sha1Base36: 1xx5tvhafvp54zfrfx5uem0vazzuo1a 
X-Timestamp: 1472980403.52438 
X-Trans-Id: tx154e595e211c449d95b3d-005a469417 
X-Varnish: 474505758 476375076, 160459070, 709465351 725460511, 931215054 920521958 

なぜこれが機能しないのですか？私のキャンバスに「汚れ」ないように何か、他にが必要ですか？

Answer 1

画像にsrcを設定すると、ブラウザは画像を要求します。しかし、その時点でまだimg.crossOriginを設定していません。 img.crossOrigin行をimg.src行の上に移動します。

これは、汚れたキャンバスの問題を修正しますが、依然としてURLを取得することはできません。イメージの要求は非同期です。まだ読み込まれていない画像でキャンバスに描画しようとしています。全部をキックオフするためにあなたのイメージにloadハンドラにコードの残りの部分を移動し、最後にimg.srcラインを置く：

const img = document.createElement('img'); 
 
img.crossOrigin = 'anonymous'; 
 
img.addEventListener('load',() => { 
 
    const canvas = document.createElement('canvas'); 
 
    canvas.width = img.width; 
 
    canvas.height = img.height; 
 
    const ctx = canvas.getContext('2d'); 
 
    ctx.drawImage(img, 0, 0); 
 
    console.log(canvas.toDataURL('image/jpg')); 
 
}); 
 
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Strychnine.svg/360px-Strychnine.svg.png';