Question

我正在学习如何使用HTML5 canvas元素。我成功地绘制了矩形，调用getImageData，操纵像素，然后putImageData看到矩形改变了颜色等。

现在我正在尝试将图像加载到画布中我遇到了麻烦。在画布的上下文中调用drawImage之后，fillRect仅绘制没有绘制图像的区域，就像在图像后面绘制矩形一样，即使它在{{1}之后调用}。此外，drawImage停止工作，即使在包含矩形的可见区域，我的像素操作也不再发生。如果我用putImageData注释掉该行，它会再次起作用。

我希望能够像处理矩形一样操纵图像中的像素。有什么理由不行吗？

绘制图像代码：

drawImage

绘制矩形代码：

var img = new Image();
img.onload = function () {
     //comment out the following line, everything works, but no image on canvas
     //if it's left in, the image sits over the rectangles, and the pixel
     //manipulation does not occur
     context.drawImage(img, 0, 0, width / 2, height / 2);
}
img.src = path;

Maniuplate像素代码：

for (var i = 0; i < amount; i++)
{
    x = random(width - size);
    y = random(height - size);
    context.fillStyle = randomColor();
    context.fillRect(x, y, size, size);
}

Answer 1

您发布的代码没有什么特别错误。给我们整个代码或考虑以下内容：

您是否在任何地方更改globalCompositeOperation？
是randomColor()使颜色过于透明而无法看到？
你有没有提到一些裁剪区域？
你是否正在把一切都画到正确的背景中？
是否存在停止执行并导致错误的拼写错误？
可能你的事件序列是错误的。您可以加载图像，然后绘制矩形，然后完成加载图像，这样看起来好像矩形是在图像后面绘制的，这只是事物的自然顺序。
是否putImageData导致安全错误（在Firefox中更容易看到），因为图像已被绘制到来自不同域的画布？此错误可能会停止所有后续绘图代码执行，从而产生您描述的效果。看看你是否违反these rules.之一。专门将图像绘制到不同来源的画布，然后尝试使用getImageData。

很可能是我列表中的最后一项或倒数第二项让你感到悲伤。

尝试在您自己的服务器上托管图像并查看它是否消失，或者查看Firefox中的Web控制台以查看它是否在抱怨安全性错误。

或者只是在Chrome / IE9中打开网络控制台，看看绘制图像时是否真的遇到了绘图代码

Answer 2

好吧，西蒙把我放在了正确的道路上。看起来浏览器将来自本地文件系统的文件与来自Web服务器的文件区别对待 - 具体而言，图像文件标记为origin-clean = false。当我在绘制图像后尝试在上下文中调用getImageData时，这会导致安全异常（NS_ERROR_DOM_SECURITY_ERR 1000）。

解决方案1是在Web服务器上托管文件。

解决方案2有点像黑客，但它对我的目的来说很好：

try {
    try { 
        var imgd = context.getImageData(0, 0, width, height); 
    } catch (e) { 
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
        var imgd = context.getImageData(0, 0, width, height);
    }
} catch (e) {throw new Error("unable to access image data: " + e)}

如果抛出安全异常，浏览器将提示用户允许覆盖。

HTML5 - 使用canvas drawImage的意外结果

2 个答案: