無法從畫布獲取像素數據

我正在從網頁上的計算機加載黑白圖像，然後在畫布中繪製圖像。然後我想要檢索第一個像素的顏色。這裏的JavaScript函數，我使用：無法從畫布獲取像素數據

function loadImage(){ 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("first"); 
    ctx.drawImage(img,0,0); 
    var z1=ctx.getImageData(0, 0, 1, 1).data[0]; 
    document.getElementById("1").value=z1; 
};

我收到以下錯誤：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

任何想法如何，我可以實現我的要求嗎？這是我正在研究的一個項目的一部分，我想創建一個繪製給定圖片的遺傳算法。這個項目的一個重要部分是比較從初始圖像（加載在畫布中）到由僞隨機像素填充的畫布的像素。然後，我將小方差引入像素，使其朝着初始圖像演變。

如果我手動繪製畫布（使用fillRect），我可以使用'getImageData'檢索像素數據。但是，當我使用圖像繪製畫布（drawImage）時，出現上述錯誤。

請幫忙。

編輯：我已經看了：How to fix getImageData() error The canvas has been tainted by cross-origin data?

但這種情況並非如此。我從我自己的電腦加載圖像。我只需將.html，.js和.png文件放在同一個文件夾中並運行.html文件即可。

來源

2016-02-28 letsplay14me

我剛纔說的一樣。那裏的答案解釋了這個問題......我猜你正在從另一個網址或來源加載你的圖片？ – Ageonix

我正在從我自己的電腦加載圖片，像這樣：我也找到了答案，但我無法理解如何解決此問題。 – letsplay14me

根據我的理解，我需要將的「crossOrigin」屬性設置爲「Anonymous」並在服務器上設置以下標題：Access-Control-Allow-Origin「*」。我無法將該屬性添加到我的標記中，因爲我收到以下錯誤：「來自原始圖像的文件：//'已被阻止加載」跨源資源共享「策略：無效的響應。因此不允許訪問。「我不知道如何在服務器上設置標題。服務器是我自己的電腦。我運行一個HTML文件。 – letsplay14me

好的，我已經安裝了WAMP，把所有內容放在「www」文件夾中並從那裏運行。工作。

來源

2016-02-28 14:31:59 letsplay14me

由於您的問題與以前提出的問題相同，因此您可能需要刪除答案和問題。 ;-) – markE

無法從畫布獲取像素數據

回答

相關問題