画布中的颜色到灰度转换

Question

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

http://chopapp.com/#x8t2ymad

WebOS是否支持从画布读取像素数据？我在这里做错了吗？

我已经提到了逻辑和代码的以下链接：

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

这很好用。

Answer 1

您应该从图片的 onload事件中移动回调中的getimagedata。

类似的东西：

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

并在绑定事件后设置源

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

避免竞赛条件

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