画布中的颜色到灰度转换

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 事件 中移动 callback 中的 getimagedata。

类似：

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

并在绑定事件后设置源

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

为了避免赛车状况

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