如何實現HTML5 canvas drawimage方法來調整圖像大小

Question

我正在嘗試將圖像尺寸從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圖像縮小比例方法，以便我可以嘗試復制該方法？

最好的祝福

Answer 1

canvas規范未定義要使用的算法。

Chrome瀏覽器使用了Skia圖形引擎中實現的Lanczos過濾器， 網址為 ： https : //chromium.googlesource.com/chromium/src/+/master/skia/ext/image_operations.cc

SVG規范僅建議使用雙線性重采樣。