キャンバス+ CrossOrigin匿名+ CORS + Chrile +マックOSX

Question

が、私は多くのことを調査した後、この方法=>

const load = (url: string) => 
    new Promise((resolve, reject) => { 
     const image = new Image(); 

     if (!image) reject(); 

     image.crossOrigin = 'Anonymous'; 
     image.src = url; 

     image.addEventListener('load',() => resolve(image)); 
     image.addEventListener('error', err => reject(err)); 
    }); 

を使用し、私は私がこれをencoutringだということが分かりましたバグ：https://bugs.chromium.org/p/chromium/issues/detail?id=409090

実際、ムービーボードにランダムな画像は表示されません。

私はこのコードを書いていないので、この行の必要性についてはわかりません。違いがあってもなくてもどうですか？

image.crossOrigin = 'Anonymous'; 

UPDATE 1

私はimage.crossOrigin = 'Anonymous';を削除すると、画像の読み込みはもうCORSの問題を持っていませんが、キャンバス上canvas.toDataURL('image/png')を使用しようとすると、私はこのエラーを取得する

Uncaught DOMException： の 'toDataURL'を実行できませんでした。 'HTMLCanvasElement'：汚染されたキャンバスをエクスポートできません。

Answer 1

あなたのイメージが異なるドメインから来て、あなたはこれらのイメージを描きました後にキャンバスコンテンツをエクスポートできるようにしたい場合は、crossOrigin属性とそれらをロードするよりも選択の余地はありません。

本当にリンクされたバグに直面している場合は、リクエストがOriginヘッダーで行われているかどうかにかかわらず、サーバーレスポンスから常にCORSヘッダーを送信するようにしてください。

また、画像のsrc（img.src = url + '?v=' + Math.random();）にランダムなクエリ文字列を追加することで、キャッシュを避けることができます。