Lanczos 重採樣如何改善 HTML5 Canvas 影像大小調整？

在HTML5 Canvas 中實現高品質圖像大小調整

問題概述

當嘗試使用JavaScript 和canvas 元素縮小圖像時，結果圖像通常縮小圖像會出現不良的偽影和模糊的像素。儘管有一個使用與信譽良好的圖像處理網站相同的程式碼的原型，但結果始終很差。

解決方案

瀏覽器使用的傳統重採樣技術和現有的畫布方法無法產生高效果- 品質縮圖。為了解決這個缺陷，我們引入了一個用 JavaScript 實作的基於 lanczos 的重採樣演算法。此方法使用可配置的內核過濾影像數據，從而實現視覺上有吸引力的縮小。

thumbnailer 類別

thumbnailer 類別封裝了基於 lanczos 的重採樣過程。它使用 canvas 元素、原始圖像和所需的縮小寬度進行初始化。

在幕後，process1 方法會對來源影像執行逐行掃描，計算每個目標像素的加權平均值。 process2 方法重建重新取樣的影像並將其渲染到畫布元素上。

自訂 JavaScript 演算法

此實作的關鍵在於 lanczosCreate 函數，該函數會產生用於過濾的 Lanczos 核心。可以透過調整內核瓣數來調整此函數，從而在效能和影像品質之間進行權衡。

程式碼片段

為了演示改進的重採樣，對原始內容進行了修改的部分提供了代碼：

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // Adjust kernel lobes as desired
    document.body.appendChild(canvas);
};

限制和兼容性

儘管提供了卓越的影像質量，但這種基於JavaScript 的重採樣技術需要大量計算，並且可能會在速度較慢的裝置上出現效能問題。此外，尚不清楚實現是否受 GPL2 許可證的保護，因為它藉用了 Anrieff Gallery Generator 的概念。

以上是Lanczos 重採樣如何改善 HTML5 Canvas 影像大小調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！