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

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);

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

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

调整画布大小保持分辨率

1 个答案: