画布中的颜色到灰度转换

Question

我正在尝试一个示例代码，该代码将彩色图像转换为 WebOS (enyo) 画布上的灰度图像。当我使用 ctx.getImageData 方法读取像素时，imageData 仅包含零。我正在使用的示例在下面的链接中提供：

http://chopapp.com/#x8t2ymad

是否有 WebOS支持从canvas读取像素数据吗？我在这里做错了什么吗？

我参考了以下链接的逻辑和代码：

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/

这有效美好的。

Answer 1

您应该将 getimagedata 移至图像的 onload 事件 的回调中。

类似于：

draw: function(image) {
    this.ctx.drawImage(event.target, 0, 0);
    this.greyImage();
},

并在绑定事件后设置源

image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";

以避免竞争情况

，现在在加载实际像素之前检索图像数据。这会导致一个空数组。