我花了很长时间试图弄清楚为什么我的 PNG 着色不起作用。 我想要:
- 创建 Canvas 。
- 在其中画一个矩形。
- 剪裁矩形，以便后续绘制发生在矩形内部。
- 在矩形内引入几个形状。
- 在矩形内引入一个 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>
最佳答案
您的代码对于支持 html5 的浏览器来说绝对没问题(正如您提到的您正在使用最新的 Chrome)。您面临跨域资源共享(CORS)[http://www.html5rocks.com/en/tutorials/cors/]问题(尽管这不是问题)当您尝试使用 file://运行 html 文件时。实际上您的“getImageData”将不起作用。最简单的解决方案是将文件托管在某个位置(例如 box.com 也可以)，或者如果您在本地工作，则可以将其托管在 IIS 中并使用 http://localhost/ 浏览它。而不是文件://。这会工作得很好。
关于javascript - 为什么对图像进行着色不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33480498/