帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

對於加載圖像的目的，畫布，我用這個方法=>帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

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這bug：https://bugs.chromium.org/p/chromium/issues/detail?id=409090

確實，隨機圖片沒有顯示在情緒板中。

我沒有寫代碼，所以我不確定這一行的必要性，它有什麼區別？

image.crossOrigin = 'Anonymous';

更新1

當我刪除了image.crossOrigin = 'Anonymous';圖像加載沒有CORS問題了，但隨後試圖在畫布上用canvas.toDataURL('image/png')，當我得到這個錯誤

未捕獲的DOMException：無法執行'toDataURL' 'HTMLCanvasElement'：受感染的畫布可能無法導出。

來源

2017-10-06 BastienSander

如果您的圖像來自不同的領域，並且希望能在你們做得出這些圖像後在畫布內容導出，那麼你沒有選擇，而不是與crossOrigin屬性加載它們。

如果你確實面臨鏈接錯誤，根據它，正確的解決方法是始終從服務器響應中發送CORS頭文件，而不管請求是否使用Origin頭文件。

快速的解決方法是通過在圖像的src（img.src = url + '?v=' + Math.random();）中附加一個隨機查詢字符串來避免緩存。

來源

2017-10-07 02:34:10 Kaiido

感謝您的快速解決，我現在要實現這一點，如果適當的解決方案工作，我會稍後發佈;） – BastienSander

帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

回答

相關問題