CODEWITHSUNDEEP
html5-canvas
awnine
awnine

Reputation: 153

reducing an images quality by downscaling and upscaling to create pixelated / noisy effect

I would like to produce a certain visual effect by taking an image in HTML5 canvas, downscaling it, and then resampling it back to its original size. I want the final image to essentially look much lower quality, either pixelated or slightly blurred, depending on what sort of anti-alisaing is used. This picture is the sort of effect I want (created on photoshop by scaling down and then up) Cat after down- and up-scaling

I have been trying to juggle multiple nested canvases, using patterns or scale, but havent quite figured out a pipeline to achieve this.

Any suggestions would be much welcome :-)

Upvotes: 0

Views: 175

Answers (1)

Alberto
Alberto

Reputation: 12939

well, you can apply the image to the canvas, and then get the bitmap, and do whatever you want:

c.drawImage(img,0,0)
data = c.getImageData(0,0,img.width, img.height).data
pixels = [];

for(px = 0; px < data.length; px+=4){
  pixels.push([data[i], data[i+1], data[i+2], data[i+3]])
}
// suppose you want to scale 1:2
scaled = []
for(px = 0; px < pixels.length; px++){
  if(px % 2){
    scaled.push(pixels[px])
  }
}
// scaled contains the alternate pixels (first yes, second no, third no...)
c.putImageData(scaled, 0, 0);

// go back to the original size with the scaled
original_scaled = []
scaled = []
for(px = 0; px < scaled.length; px++){
  if(px % 2){
    original_scaled.push(pixels[px])
    original_scaled.push(pixels[px])
  }
}
c.putImageData(original_scaled, 0, 0);

this is done using scaling... however, I don't this is the way to go... probably using a mask you will achieve a better result, eg. taking the avg of the nearby pixels

Upvotes: 1

Related Questions