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

【问题标题】：resize image in canvas keeping resolution在画布中调整图像大小保持分辨率
【发布时间】：2014-03-04 00:21:16
【问题描述】：

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

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? 得到了非常好的结果，但是调整大小的图像在 KB 中比原始图像更重！有没有一种好的算法来获得高质量的调整大小的图像，保持它们的轻量级？

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

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

Canvas 基于 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);

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

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

【讨论】：

正是我要找的...感谢您的解释！