透過縮小尺寸重新取樣會降低影像品質？

此處的目標是縮小影像的大小，同時在瀏覽器環境中保持其品質。使用 HTML5 畫布縮小影像時會出現此問題，導致影像品質下降。

縮小尺寸與插值

縮小尺寸和插值是不同的技術。縮小是指透過組合來源影像中的像素以在目標影像中建立較少的像素來減小影像尺寸，而插值是指在放大時在目標影像中建立新像素。在縮小尺寸的情況下，插值是無關緊要的。

Pixel Perfect Downscaling

問題在於瀏覽器對縮小尺寸的實現，它使用一種簡單的方法，從來源影像中選取單一像素來代表目標影像中的每個像素。這可能會導致細節和噪音的損失。

解決方案：像素完美縮小演算法

像素完美縮小演算法可確保所有來源像素貢獻一個、兩個或四個目標像素，取決於像素的重疊。此演算法會取得每個來源像素並計算其權重以及目標像素及其相鄰像素內的下一個權重。然後使用權重來計算來源像素對目標像素的貢獻。

實作詳細資訊

所提供的 JavaScript 程式碼提供了像素完美的縮小演算法。它會建立一個 float32 陣列來儲存中間像素值，該值是目標影像大小的三倍。對於大圖像來說，這可能會佔用大量記憶體。

限制

雖然此演算法提供高品質的縮小尺寸，但由於使用 getImageData 和 putImageData 函數，處理大圖像可能會很慢。

其他注意事項

對於較小的圖像，可以使用 HTML5 canvas 的內建縮放機制執行多次縮小，因為它們針對小圖像進行了優化。對於較大的圖像，請考慮使用其他方法（例如 CSS 或 WebGL）進行縮小。