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中文网其他相关文章！