Question

我正试图去饱和图像。我正在加载它，解析图像数据，但我无法将其写回画布。

我已按照所有指示进行操作

context.putImageData(imagedata,0,0);

我这样做，但图像数据不会改变。 “ctx”是先前加载的图像的上下文，该图像被转换为灰度。

    greyscale: function grayscale(ctx){

        var id = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height);

        for(var i=0; i<id.height; i++){
            for(var e=0; i<id.width; i++){

                var index = (e*4)*id.width+(i*4);

                var avg = (id.data[index] + id.data[index+1] + id.data[index+2]) / 3

                id.data[index] = avg;     
                id.data[index+1] = avg;
                id.data[index+2] = avg;
            }
        }

        ctx.putImageData(id,0,0);

    }

Answer 1

你的内循环是比较和递增i而不是e。

在计算索引时，您还可以切换e和i。它应该是（有4个因素）：

var index = 4 * (i*id.width + e);

Answer 2

也许不是你寻求的答案，但你看过flot.js吗？不错的图表功能和源代码可供阅读。

Answer 3

问题在于：

for(var e=0; i<id.width; i++){

你的“e”没有升起

javascript canvas putImageData不写入修改过的数据

3 个答案: