Html5画布调整大小

Html5 Canvas resize

本文关键字：调整布调整 Html5 更新时间：2023-09-26

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

例如

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

有没有什么我们可以做的，当我们调整html5画布的大小，这样如果我们减少尺寸，我们可以预期一些文件大小的减少，如压缩。

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

例如，你可以这样写:

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

下面是w3c参考中的描述:www.w3.org: toDataURL

看起来Firefox中存在一个忽略质量的错误，所以您可能需要在一些现代浏览器中进行测试。