在画布中调整图像大小以保持分辨率

Question

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

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为单位的图像重量对我很重要；我想要一个非常轻的图像；即使它被调整大小，画布的图像仍然太重；我可以看到保存在服务器上的图像的分辨率为96 DPI和32位颜色深度，即使原始图像的分辨率为72 DPI和24位颜色深度；为什么？我能设置画布的图像分辨率吗？
• 调整大小的图像看起来不太好，因为调整大小的过程会导致失真.我在这篇文章中尝试了GameAlchemist的自定义算法：HTML5 Canvas Resize (Downscale) Image High Quality?获得了一个非常好的结果，但是调整大小的图像比原来的更重！有一个好的算法，以获得高质量的调整大小的图像，保持它们的轻量级？

Answer 1

新闻部对图像一点也不重要。在1kx1k的图像将是相同的，如果是892478427新闻部或1新闻部。DPI在这种情况下是任意的，因此忽略该部分(它仅用作DTP程序的信息，因此他们知道相对于文档大小的相对大小)。图像仅以像素为单位测量。

画布是基于RGBA的(32位，24位颜色+8位alpha通道)，所以它是导出图像的最佳形式。( PNG文件)但是，通过请求JPEG格式作为导出格式，您可以不使用alpha通道导出24位图像。

压缩基本上是信号处理。与所有形式的(有损)压缩一样，为了减小大小，您尝试删除信号中的频率。频率越高，压缩图像(或声音或任何其他信号)的难度就越大。

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

因此，为了缩小图像大小，您可以在压缩图像之前对图像进行轻微的模糊处理。

JPEG格式支持质量设置，这些设置也可以缩小大小，尽管这使用了与模糊不同的方法：

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

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

或者你可以使用一个“真实”模糊算法，如高斯模糊和方框模糊，但只有少量。