I’m trying to manipulate ImageData, change it into a different image.

For image-data manipulation I’m using this (it just makes all the darker pixels darkest, and lighter pixels lightest)

  colorize = (pixels) => {
    //console.log(pixels)
    console.log(pixels.height)
    console.log(pixels.width)
    for(let l=0;l<pixels.data.length;l+=1){
      console.log(pixels[l] + " -- b")
      pixels.data[l] = pixels.data[l] > 128 ? 256 : 0;
      console.log(pixels.data[l])
    }
    return pixels;
    }

but this operations seems to be very slow for 200*201*(=40200)* pixels.

Here is the resulting output :

r/webdev - how to manipulate image-data in a better efficient way - canvas

with the function

Without this :

r/webdev - how to manipulate image-data in a better efficient way - canvas

without the function

My questions are –

  • How can I make is faster ?

  • Why is the console.log(pixels[l] + ” — b”) logging undefined –b ?

  • If the values is actually undefined, how come it’s returning 0 sometimes, sometimes 255. Is JS the next-gen quantum computing language ?(last part was joke)



Source link

Write A Comment