限制HTML5画布调整大小时图片的大小（<1MB）

Question

我有一个HTML5图片上传器。我为用户选择的任何图像上传两个图像。一个是64x64，另一个是320x240。 我使用canvas.drawImage()来调整图像大小。一切运作良好。

然而，如何确保调整大小后的图像不超过1MB？调整大小后的图像大小是否取决于使用的浏览器？

- Mayur Buragohain

---

假设您的图像是24位，未压缩的图像文件大小可以按如下计算：320px x 240px x 24bit = 1,843,200 bits = 230,400 bytes。它不应超过1MB。(计算器) - Raptor

我该如何获取图像的颜色深度？screen.colorDepth 可以给出 colorPalette 的深度。但是对于在屏幕上显示的图像，它是否也相同呢？ - Mayur Buragohain

是的。FYI，RGB 是 24 位的。99% 的情况下您使用的是 RGB。 - Raptor

@ShivanRaptor canvas 实际上是 32 位的，包括 RGB 和 alpha 通道。只有在 JPEG 格式下结果才会是 24 位，而在 PNG 格式下则为 32 位。 - user1693593

明白了。感谢澄清。 - Raptor

Answer 1

由于压缩后的文件大小取决于内容被压缩得有多好，因此您无法保证其大小。

如果图像具有高频率（许多细节、噪声等），则它将更难压缩，您需要使用更强的质量设置（对于JPEG）来过滤更多的数据。

但是，您可以计算图像的原始大小。画布为32位，即RGB（24位）的三个8位通道+一个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).

当图像被转换为数据URI时，内容会被编码为base-64。由于数据的编码方式（加上一个小标题来实际上使其成为数据URI，大约14-20字节），base-64始终会增加33％的大小。无论如何，在这种情况下，您应该远远低于1 mb的限制。

- user1693593