爲什麼不着色圖像工作？

我一直在努力弄清楚爲什麼我的PNG彩色化不起作用。我想：爲什麼不着色圖像工作？

創建一個畫布。
在其中畫一個矩形。
clip rect，以便後面的繪圖發生在rect內部。
在裏面帶來幾個形狀。
也在裏面引入一個PNG（帶有透明區域）。
爲Png着色，其中下面的形狀通過透明區域顯示，PNG可以穿透任何顏色。

我非常沮喪，我一直在簡化以解決問題的根源，直到我從W3schools網站複製了SIMPLEST代碼片段，並且這種簡單的圖像着色方法無效！爲什麼簡單的例子在W3site上查看時會起作用，但是當我將VERBATIM複製到我的計算機上時（更改圖像名稱和src）它不起作用？

我得到了最新的Chrome瀏覽器。這裏是W3schools的代碼。

<!DOCTYPE html> 
<html> 
<body> 

<img id="scream" src="supportArt/scream.jpg" alt="The Scream" width="220" height="277"> 
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
document.getElementById("scream").onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img, 0, 0); 
    var imgData = ctx.getImageData(0, 0, c.width, c.height); 
    // invert colors 
    var i; 
    for (i = 0; i < imgData.data.length; i += 4) { 
     imgData.data[i] = 255 - imgData.data[i]; 
     imgData.data[i+1] = 255 - imgData.data[i+1]; 
     imgData.data[i+2] = 255 - imgData.data[i+2]; 
     imgData.data[i+3] = 150; 
    } 
    ctx.putImageData(imgData, 0, 0); 
}; 
</script> 

</body> 
</html>

來源

2015-11-02 bobcodenewbie

究竟「不起作用」是什麼意思？控制檯中是否有錯誤？有事情發生，但錯誤的事情？如果是這樣，那是什麼？ – Pointy

你是否得到了一個畫布已被交叉原點數據錯誤污染？我只是複製你的代碼並編碼了一個圖像，它似乎有點工作jsfiddle.net/CanvasCode/0dat2jdw/1但是你得到@Pointy指出的錯誤 – Canvas

你好... html圖像在那裏，它也顯示放置在畫布上，但不應用着色。錯誤說...未捕獲SecurityError：未能執行'CanvasRenderingContext2D'上的'getImageData'：畫布已被交叉源數據污染。那是什麼意思？ @Pointy – bobcodenewbie

你的代碼對於支持html5的瀏覽器來說絕對正常（正如你剛纔提到的你正在使用最新的Chrome）。你正面臨跨域資源共享（CORS）[http://www.html5rocks.com/en/tutorials/cors/]問題（儘管它不是問題），而你試圖運行你的HTML文件使用file：// ..實際上你的「getImageData」將不起作用。最簡單的解決方案是將文件託管在某些位置（例如box.com也可以工作），或者如果您在本地工作，則可以將其託管在IIS中，然後使用http://localhost/而不是file：//進行瀏覽。這將工作正常。

來源

2015-11-02 16:04:14 enthusiast

爲什麼不着色圖像工作？

回答

相關問題