JavaScript холст putImageData не записывает измененные данные

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 и я, когда вы рассчитываете индекс. Должно быть (с учетом 4 фактора):

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

Answer 2

проблема здесь:

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

ваше "е" не поднимается

Answer 3

Может быть, не тот ответ, который вы ищете, но вы смотрели на flot.js? Хорошие функции построения графиков и исходный код доступны для прочтения.