javascript - 画布中的颜色到灰度转换

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";

避免赛车状况

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