CORS錯誤取決於圖像參數設置順序

我正在使用畫布顯示圖像並使用getImageData（）獲取該圖像的特定部分的信息。根據我設置圖像參數的順序，它可以或不可以。CORS錯誤取決於圖像參數設置順序

在文檔主體上使用onload調用該方法。下面是代碼：

function draw() { 
    var canvas = document.getElementById("canvas"); 
    if (canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 
    var img = new Image(); 

    img.src = "url_to_image"; 
    img.crossOrigin = "anonymous"; 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
    var data = document.getElementById('canvas').getContext('2d').getImageData(310, 320, 1, 1).data 
    } 
}

這觸發以下crossOrigin錯誤：

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

從中我得到的影像的服務器被配置爲把我回來的圖像的Access-Control-Allow-Origin:*響應頭。

img.crossOrigin = "anonymous"; 
img.src = "url_to_image";

這似乎很奇怪對我說：

但是，如果我剛纔設置的image.src前img.crossOrigin做的一切工作就好了。任何人都知道發生了什麼？

來源

2014-03-27 fab

.crossOrigin一定要來之前的.src

這是因爲實際的.src開始下載。

瀏覽器必須知道在開始下載時是否允許匿名訪問，或者默認不允許跨源訪問。

現代瀏覽器（FF，Chrome，Safari，Opera，Android）幾乎全面支持跨來源共享。 Opera的迷你版本是唯一主要的非支持瀏覽器。

而且，正如您發現的那樣，傳遞數據的服務器必須配置爲發送適當的標題，以便瀏覽器知道允許交叉共享。

來源

2014-03-27 16:32:05 markE

CORS錯誤取決於圖像參數設置順序

回答

相關問題