CODEWITHSUNDEEP
javascriptcanvas
Geuis
Geuis

Reputation: 42277

javascript canvas putImageData not writing modified data

I'm attempting to desaturate an image. I'm currently loading it, parsing the image data, but I can't get it to write back to the canvas.

I've followed all of the directions to do 

context.putImageData(imagedata,0,0);

I do this, but the image data doesn't change. "ctx" is the context of the image that is previously loaded that is being turned greyscale.

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

    }

Upvotes: 2

Views: 1959

Answers (3)

Shock
Shock

Reputation: 1

the problem is here :

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

your "e" is not rise up

Upvotes: 0

Matthew Crumley
Matthew Crumley

Reputation: 102725

Your inner loop is comparing and incrementing i instead of e.

You also have e and i switched when you calculate the index. It should be (with the 4 factored out):

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

Upvotes: 1

Upperstage
Upperstage

Reputation: 3757

Maybe not the answer you seek, but have you looked at flot.js? Nice charting features and the source code is available for perusal.

Upvotes: 1

Related Questions