0

I'm trying to do image downscaling from say a 512*512 to 256*256 pixels where the greyscale image is represented as a javascript array size 512*512. When using canvas drawimage method it is straight-forward to draw a 512*512 image as a 256*256 image where this downscaled image appears smooth. I'm trying to do the same with a javascript array as described above where I first do convolution on the image with a gaussian kernel =[1/16,2/16,1/16,2/16,4/16,2/16,1/16,2/16,1/16] and subsequently I do subsampling of the blurred 512*512 image to yield the 256*256 image array which i convert to canvas imagedata. However, in comparison to the downscaling with the canvas drawimage method the method with blurring and subsampling yeilds a more "ragged" image. Does any one know how the draimage image downscaling method is implemented so that I can try to replicate that one?

Best regards

user3220072
  • 97
  • 8

1 Answers1

0

The canvas specification does not define an algorithm to use.

Chrome uses the Lanczos filter as implemented in the Skia graphics engine here: https://chromium.googlesource.com/chromium/src/+/master/skia/ext/image_operations.cc

The SVG spec just recommends bilinear resampling.

aptriangle
  • 1,395
  • 1
  • 9
  • 11