在 HTML5 画布调整大小时限制图像大小 (<1MB)

Question

我有一个用于图像的 HTML5 上传器。我为用户选择的任何图像上传两个图像。一个是 64x64，另一个是 320x240。我正在使用canvas.drawImage()调整图像大小。一切正常。

但是，如何确保调整大小后的图像 <= 1MB 。调整大小后的图像大小是否取决于所使用的浏览器？

Answer 1

您无法保证大小，因为生成的压缩文件取决于内容的压缩程度。

如果您有高频图像（许多细节、噪声等），那么压缩起来会比较困难，您需要使用更强的质量设置（对于 JPEG）来过滤掉更多数据。

但是，您可以计算图像的原始大小。Canvas 为 32 位，即 3 个 8 位 RGB 通道（24 位）+ 1 个 8 位 alpha 通道。

如果将图像保存为 PNG，您将获得 RGBA - 其大小为：

width * height * 4 = size in bytes

如果保存为 JPEG，则只有 RGB：

width * height * 3 = size in bytes

JPEG 的压缩程度比 PNG 重，因此您可以通过使用可选的质量参数来进一步减小尺寸toDataURL(type [, quality= [0.0, 1.0]])。

对于您的示例尺寸，原始尺寸为：

320 x 240 x 4 = 307 200 bytes (/ 1024 = 300 kb / 1024 = 0.29 mb).

并使用 RGB（无 Alpha）

320 x 240 x 3 = 230 400 bytes (/ 1024 = 225 kb / 1024 = 0.22 mb).

当图像转换为 data-URI 时，内容将编码为 base-64。由于数据编码方式的原因，Base-64 总是增加 33% 的大小（加上一个小标头以实际使其成为数据 uri，IIRC 大约 14-20 字节）。

无论如何，在这种情况下，您应该完全在 1 mb 限制之内。