Html5画布调整大小答案

【问题标题】：Html5 Canvas resizeHtml5画布调整大小
【发布时间】：2011-08-30 20:21:55
【问题描述】：

我正在使用画布在客户端调整图像大小，然后将该图像上传到服务器。我的意图是将图像大小调整为原始尺寸的一半，并希望看到文件大小减小。但调整后的图像大小总是大于原始大小。

例如，

我正在将尺寸为 2592 x 1936 到 1296 x 968（JPEG 文件）的 2.5 MB JPEG 图像文件调整大小并尝试将其上传到服务器。在服务器上，我看到文件以 3.5 MB 大小保存。

在使用 html5 画布调整大小时我们可以做些什么，这样如果我们减小尺寸，我们可以预期文件大小会有所减小，例如压缩。

【问题讨论】：

我知道如何通过画布加载图像，但我不禁想知道：您是从 JPEG 开始并以 PNG 结尾的吗？
正在持久化图像文件类型。
检查 JPEG 的压缩。例如，缩小 70% 质量并以 100% 质量重新编码的 JPEG 可能比原始文件大。
嗨，Seth，有没有一种方法可以在使用画布调整大小时控制质量？
有点上下文会很棒。 - 您使用的是 toDataUrl 还是 toBlob？ - 您正在与哪些客户进行测试？你知道the standard only requires PNG to be supported by the client

【解决方案1】：

如果您使用 toDataURL，您可以将第二个参数设置为 0.0 到 1.0 之间的数字。这是 JPEG 质量级别，1.0 表示非常高的质量和非常大的图像，接近 0.0 表示质量较低的较小图像。

因此，例如，您可以尝试：

 data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

这是 w3c 参考中的描述：www.w3.org: toDataURL

Firefox 中似乎存在一个与忽略质量有关的错误，因此您可能需要在一些现代浏览器中进行测试。

【讨论】：