为什么不着色图像工作？

我一直在努力弄清楚为什么我的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

为什么不着色图像工作？

回答

相关问题