轉換img爲灰度使用js面臨安全錯誤

我正在做舊手機的後備，我不能只使用CSS，我發現一種方法將圖像轉換成使用js的灰度圖像。轉換img爲灰度使用js面臨安全錯誤

var imgObj = document.getElementById('templateBg'); 

    function gray(imgObj) { 
     var canvas = document.createElement('canvas'); 
     var canvasContext = canvas.getContext('2d'); 

     var imgW = imgObj.width; 
     var imgH = imgObj.height; 
     canvas.width = imgW; 
     canvas.height = imgH; 

     canvasContext.drawImage(imgObj, 0, 0); 
     var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 

     for (var y = 0; y < imgPixels.height; y++) { 
      for (var x = 0; x < imgPixels.width; x++) { 
       var i = (y * 4) * imgPixels.width + x * 4; 
       var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
       imgPixels.data[i] = avg; 
       imgPixels.data[i + 1] = avg; 
       imgPixels.data[i + 2] = avg; 
      } 
     } 
     canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
     return canvas.toDataURL(); 
    } 
    imgObj.src = gray(imgObj);

但我得到這個錯誤

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

來源

2015-05-26 Aaron Musktin

您需要啓用跨源資源共享。檢查了這http://enable-cors.org/index.html –

您正在運行到Same Origin Policy因爲它涉及到畫布：因爲工作區包含來自不同產地來到東西，你的代碼不能修改它。

從canvas 2D spec：

的getImageData（SX，SY，SW，SH）方法必須，如果canvas元素的起源，清潔標誌設置爲false，拋出一個SecurityError異常

如果您控制了兩個來源，則可以通過Cross-Origin Resource Sharing啓用訪問權限。（儘管如此，我還沒有做過與油畫相關的工作。）

來源

2015-05-26 07:24:34

我的js是在a.abc.com，我的形象是在b.abc.com，但我有這個問題？ –

@AaronMusktin：對：這些來自不同的來源。對於相同*來源的東西，主機，端口和協議必須全部匹配。 'a.abc.com'和'b.abc.com'是不同的主機。 –

轉換img爲灰度使用js面臨安全錯誤

回答

相關問題