如何实现HTML5 canvas drawimage方法来调整图像大小

时间:2019-02-24 01:07:34

标签: javascript image image-processing html5-canvas convolution

我正在尝试将图像尺寸从512 * 512缩小到256 * 256像素,其中灰度图像表示为javascript数组大小512 * 512。 使用画布drawimage方法时,直接将512 * 512的图像绘制为256 * 256的图像,此缩小图像看上去很平滑。 我正在尝试使用如上所述的javascript数组进行相同的操作,其中首先使用高斯核= [1 / 16,2 / 16,1 / 16,2 / 16,4 / 16,2对图像进行卷积/ 16,1 / 16,2 / 16,1 / 16],然后我对模糊的512 * 512图像进行二次采样,以生成256 * 256图像阵列,并将其转换为画布imagedata。 但是,与使用canvas drawimage方法进行缩小相比,使用模糊和二次采样的方法将产生更“粗糙”的图像。 有谁知道如何实现draimage图像缩小比例方法,以便我可以尝试复制该图像?

最诚挚的问候

1 个答案:

答案 0 :(得分:0)

画布规范未定义要使用的算法。

Chrome使用Lanskis过滤器,如在Skia图形引擎中实现的:https://chromium.googlesource.com/chromium/src/+/master/skia/ext/image_operations.cc

SVG规范仅建议使用双线性重采样。