为什么不能为图像着色？答案

【问题标题】：Why wont colorizing an image work?为什么不能为图像着色？
【发布时间】：2016-02-02 12:09:08
【问题描述】：

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

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

我感到非常沮丧，以至于我一直在简化以找到问题的根源，直到我从 W3schools 网站复制了最简单的一段代码，而这种简单的图像着色不起作用！为什么当我在 W3site 上查看这个简单的示例时它会起作用，但是当我将它逐字复制到我的计算机上时（更改图像名称和 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>

【问题讨论】：

“不起作用”到底是什么意思？控制台中是否有错误？有什么事情发生了，但是是错误的事情吗？如果有，那是什么东西？
您是否收到“画布已被跨域数据污染”错误？我刚刚复制了你的代码并编码了一个图像，它似乎有点工作 jsfiddle.net/CanvasCode/0dat2jdw/1 但是你得到了什么错误@Pointy指出
您好... html 图像在那里，它也显示在画布中，但没有应用着色。错误说...未捕获的安全错误：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。那是什么意思？ @Pointy
如果图像来自不同的域，浏览器将不允许您检查像素。这就是“跨域”的意思。您可以将图像托管在与主页相同的域中以解决该问题。
我只是在我的电脑上运行它。它与“supportArt”文件夹一起位于一个文件夹中。我需要上传到真实的网站来测试吗？ @Pointy

标签： javascript canvas png colorize

【解决方案1】：

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

【讨论】：