HTML5 Canvas调整大小

Question

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

例如，

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

在调整html5 canvas的大小时是否可以做些什么，以便减小尺寸，可以预期文件大小会有所减少，例如压缩。

Answer 1

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

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

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

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

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