無法從畫布獲取圖像數據，因爲畫布已被交叉源數據污染

我正在使用html5 Canvas從圖像獲取顏色。爲此，我寫在JavaScript下面的代碼：無法從畫布獲取圖像數據，因爲畫布已被交叉源數據污染

http://jsfiddle.net/8dQSS/1/（請檢查連接控制檯查看除外）

function getImageColor() { 
    var colors = []; 
    var image = new Image(); 

    image.onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width = image.width; 
     canvas.height = image.height; 

     // Draw the image in canvas 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(image, 0, 0); 

     // Get the pixel data 
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 

     // Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha 
     for (var x = 0; x < imageData.width; x++) { 
      for (var y = 0; y < imageData.height; y++) { 
       var index = 4 * (y * imageData.width + x); 
       var r = imageData.data[index]; 
       var g = imageData.data[index + 1]; 
       var b = imageData.data[index + 2]; 
       var a = imageData.data[index + 3]; 

       colors.push("rgb(" + r + "," + g + "," + b + ")"); 
      } 
     } 
    }; 
    image.src = "http://www.xxxxxxxxxxxx.com/demos/assets/image.jpg"; 
}

上面的代碼拋出以下異常：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 
Uncaught Error: SECURITY_ERR: DOM Exception 18

能

人請告訴我如何解決這個問題？

來源

2013-01-21 gaurav

不要從其他領域，其內容則不允許訪問使用的圖片？ – Bergi

也許這將有助於診斷（這是一箇舊的帖子）：我從一個從SVG元素創建的數據URI生成的畫布沒有任何圖像，這個錯誤。在FF和Safari上工作得很好。 – LeeGee

我從SVG元素的JavaScript動態創建的圖像中獲取該圖像，並將其作爲數據URI傳遞。這是一種痛苦，然後說：「Uncaught SecurityError：試圖突破用戶代理的安全策略。」 Chrome試圖太聰明？ – LeeGee

我知道的唯一解決方案是讓您想要載入的圖像與您的文件位於同一臺服務器上，您無法通過畫布訪問和處理任何想要在網絡上顯示的圖像。

編輯：如果你想你可以做like this。

來源

2013-01-21 12:22:35 Razouille

你是通過文件系統使用這個嗎？如果是，那麼在服務器上運行它（本地主機）。

來源

2013-05-06 12:01:51

非常感謝！這正是我所需要的 – Maccle415

我得到了同樣的錯誤。我在畫布上搜索了很多關於crossorigin的內容。第一個解決方案是添加img.crossOrigin='anonymous'。但問題依然存在。我正在使用s3服務的資產，並解決了在存儲桶策略中添加此問題的問題。

{ 
    "Version": "2008-10-17", 
    "Statement": [ 
    { 
     "Sid": "AllowPublicRead", 
     "Effect": "Allow", 
     "Principal": { 
     "AWS": "*" 
     }, 
     "Action": "s3:GetObject", 
     "Resource": "arn:aws:s3:::seu-candidato/*" 
    } 
    ] 
}

從桶中的資產有一些像PARAMS X-Amz-Expires，X-Amz-Date我刪除它們，我的問題WS固定

來源

2016-08-27 22:34:26

無法從畫布獲取圖像數據，因爲畫布已被交叉源數據污染

回答

相關問題