为什么不给图像着色？

Question

I have been having a bear of a time trying to figure out why my colorization of a PNG won't work. 我一直在花时间试图弄清楚为什么我的PNG着色不起作用。 I want to: 我想要：

create a canvas. 创建一个画布。
draw a rectangle in it. 在其中绘制一个矩形。
clip the rect, so that subsequent drawing happens INSIDE the rect. 剪裁矩形，以便随后在矩形内进行绘制。
bring in a couple of shapes INSIDE the rect. 在矩形内部引入几个形状。
bring in a PNG (with transparent areas) inside the rect as well. 还要在直肠内引入PNG（带有透明区域）。
Colorize the Png, in which the shapes underneath shows through the transparent areas and the PNG can togle thru any color. 为Png着色，其中下面的形状通过透明区域显示，PNG可以通过任何颜色切换。

I got so frustrated that I kept simpifying to get to the root of the problem, until I just copied the SIMPLEST piece of code from the W3schools site, and this simple image colorization doesn't work! 我感到非常沮丧，以至于我一直不遗余力地寻找问题的根源，直到我刚刚从W3schools网站复制了SIMPLEST代码，而这种简单的图像着色却行不通！ Why does the simple example work when I look at it on the W3site but when I copy it VERBATIM onto my computer (change image name and src) it doesn't work? 为什么当我在W3网站上查看该简单示例时却能正常工作，但是将VERBATIM复制到我的计算机上（更改映像名称和src）却无法正常工作？

I got the latest Chrome. 我得到了最新的Chrome。 Here's the code from W3schools. 这是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

your code is absolutely fine for html5 supported browsers(as you mentioned you are using latest Chrome). 您的代码绝对适合html5支持的浏览器（如您所提到的，您使用的是最新的Chrome）。 you are facing a cross domain resource sharing (CORS)[ http://www.html5rocks.com/en/tutorials/cors/] problem(though it's not a problem) while you are trying to run your html file using file://.. actually your "getImageData" will not work. 您尝试使用file：/来运行html文件时，遇到了跨域资源共享（CORS）[ http://www.html5rocks.com/en/tutorials/cors/]问题（尽管这不是问题）。 / ..实际上，您的“ getImageData”将不起作用。 the easiest solution is to host your files some where (for example box.com will also work) or if you are working locally then you may host it in IIS and browse it using http://localhost/ instead of file://. 最简单的解决方案是将文件托管在某个位置（例如box.com也可以使用），或者如果您在本地工作，则可以将其托管在IIS中并使用http：// localhost /而不是file：//进行浏览。 this will work fine. 这会很好。

为什么不给图像着色？

问题描述

1 个解决方案

解决方案1
1 2015-11-02 16:04:14

为什么不给图像着色？

问题描述

1 个解决方案

解决方案1 1 2015-11-02 16:04:14

解决方案1
1 2015-11-02 16:04:14