javascript - 在 Canvas 中调整图像大小以保持分辨率

Question

在将图像上传到服务器之前，我正在使用 Canvas 调整客户端图像的大小。

maxWidth = 500;
maxHeight = 500;
//manage resizing
if (image.width >= image.height) {
    var ratio = 1 / (image.width / maxWidth);
}
else {
    var ratio = 1 / (image.height / maxHeight);
}

...

canvas.width = image.width * ratio;
canvas.height = image.height * ratio;
var resCtx = canvas.getContext('2d');
resCtx.drawImage(image, 0, 0, image.width * ratio, image.height * ratio);

这是有效的，因为在服务器上保存了调整大小的图像，但有两点我想改进:

• 以 KB 为单位的图像权重对我来说很重要；我想要一个非常轻量级的图像；即使调整大小， Canvas 的图像仍然太重；我可以看到保存在服务器上的图像具有 96 DPI 和 32 位色深的分辨率，即使原始图像的分辨率为 72 DPI 和 24 位色深；为什么？我可以设置 Canvas 的图像分辨率吗？

• 调整大小后的图像看起来不太好，因为调整大小的过程会引入失真...我在这篇文章中尝试了 GameAlchemist 的自定义算法: HTML5 Canvas Resize (Downscale) Image High Quality? 得到一个非常好的结果，但是调整后的图像比原始图像更重 KB!是否有一个好的算法来获得高质量的调整大小的图像，同时保持它们的轻量级？

Answer 1

DPI 与图像完全无关。如果 892478427 DPI 或 1 DPI，则 1k x 1k 的图像将完全相同。 DPI 在此上下文中是任意的，因此忽略该部分(它仅用作 DTP 程序的信息，因此它们知道与文档大小相比的相对大小)。图片仅以像素为单位。

Canvas 基于 RGBA(32 位、24 位颜色 + 8 位 alpha channel )，因此导出图像的最佳形式将采用这种格式(即 PNG 文件)。但是，您可以通过请求 JPEG 格式作为导出格式来导出不带 alpha channel 的 24 位图像。

压缩基本上是信号处理。与所有形式的(有损)压缩一样，您会尝试移除信号中的频率以减小尺寸。频率越高，压缩图像(或声音或任何其他基于信号的东西)就越难。

在图像中，高频表现为小细节(细线等)和噪声。要减小压缩图像的大小，您需要去除高频。您可以通过使用插值作为低通滤波器来做到这一点。模糊也是低通滤波器的一种形式，原则上它们的工作方式相同。

因此，为了减小图像大小，您可以在压缩图像之前对图像应用轻微模糊。

JPEG 格式支持可以减小尺寸的质量设置，尽管它使用的方法与模糊不同:

// 0.5 = quality, lower = lower quality. Range is [0.0, 1.0]
var dataUri = canvas.toDataURL('image/jpeg', 0.5);

要模糊图像，您可以使用一种简单快速的方法将其缩放到一半大小，然后再返回(启用平滑)。这将通过平均像素使用插值作为低通滤波器。

或者您可以使用“真正的”模糊算法，例如高斯模糊和框模糊，但只能使用少量。