Html5 Canvas调整大小

Question

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

例如，

我2592 X 1936调整一个2.5 MB JPEG图像文件具有尺寸1296 X 968（JPEG文件），并试图将其上传到服务器。在服务器上，我看到该文件以3.5 MB大小保存。

有没有什么，我们可以做，而调整大小与html5画布，以便如果我们减少尺寸，我们可以期望像压缩文件大小减少。

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中的错误做忽视质量，所以你可能需要在一些现代浏览器中测试。