通过缩小尺寸重新采样会降低图像质量？

此处的目标是减小图像的大小，同时在浏览器环境中保持其质量。使用 HTML5 画布缩小图像时会出现此问题，导致图像质量下降。

缩小尺寸与插值

缩小尺寸和插值是不同的技术。缩小是指通过组合源图像中的像素以在目标图像中创建更少的像素来减小图像尺寸，而插值是指在放大时在目标图像中创建新像素。在缩小尺寸的情况下，插值是无关紧要的。

Pixel Perfect Downscaling

问题在于浏览器对缩小尺寸的实现，它使用一种简单的方法，从源图像中选取单个像素来代表目标图像中的每个像素。这可能会导致细节和噪声的损失。

解决方案：像素完美缩小算法

像素完美缩小算法可确保所有源像素贡献一个、两个或四个目标像素，取决于像素的重叠。该算法获取每个源像素并计算其权重以及目标像素及其相邻像素内的下一个权重。然后使用权重来计算源像素对目标像素的贡献。

实现详细信息

所提供的 JavaScript 代码提供了像素完美的缩小算法。它创建一个 float32 数组来存储中间像素值，该值是目标图像大小的三倍。对于大图像来说，这可能会占用大量内存。

局限性

虽然此算法提供高质量的缩小尺寸，但由于使用 getImageData 和 putImageData 函数，处理大图像可能会很慢。

其他注意事项

对于较小的图像，可以使用 HTML5 canvas 的内置缩放机制多次执行缩小，如下所示他们针对小图像进行优化。对于较大的图像，请考虑使用其他方法（例如 CSS 或 WebGL）进行缩小。