JavaScript Canvas putImageData не записывает измененные данные

Я пытаюсь обесцветить изображение. В настоящее время я загружаю его, анализируя данные изображения, но не могу заставить его записать обратно на холст.

Я следовал всем указаниям, чтобы сделать

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

    }

javascript canvas
person Geuis    schedule 02.12.2009    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ваш внутренний цикл сравнивает и увеличивает i вместо e.

У вас также есть e и i, когда вы вычисляете индекс. Должно быть (с учетом 4):

var index = 4 * (i*id.width + e);
person Matthew Crumley    schedule 02.12.2009

arrow_upward
0
arrow_downward

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

person Upperstage    schedule 02.12.2009

arrow_upward
0
arrow_downward

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

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

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

person Shock    schedule 13.07.2010