Question

我一直在努力弄清楚为什么我的PNG着色不起作用。我想：

制作画布。
在其中绘制一个矩形。
剪辑矩形，以便后续绘图发生在矩形内。
在矩形中加入几种形状。
在矩形内引入PNG（带透明区域）。
着色Png，其中下方的形状通过透明区域显示，PNG可以通过任何颜色进行切换。

我非常沮丧，我一直在简单地解决问题的根源，直到我从W3schools网站复制了一段简单的代码，这个简单的图像着色不起作用！为什么这个简单的例子在我在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>

Answer 1

对于支持html5的浏览器，您的代码绝对正常（正如您所提到的，您使用的是最新的Chrome）。当您尝试使用file：//实际运行您的html文件时，您正面临跨域资源共享（CORS）[http://www.html5rocks.com/en/tutorials/cors/]问题（虽然这不是问题） ; getImageData＆＃34;不管用。最简单的解决方案是将文件托管在某些位置（例如box.com也可以使用），或者如果您在本地工作，那么您可以在IIS中托管它并使用http://localhost/而不是file：//进行浏览。这样可以正常工作。

为什么不对图像着色？

1 个答案: