Html5 画布调整大小 [英] Html5 Canvas resize

问题描述

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

Am using canvas to resize image at the client side and then upload that image to the server. My intention was to resize the image to half of its original dimensions and wanted to see a decrease in the file size. But the resized image size is always greater than the original.

例如

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

I was resizing a 2.5 MB JPEG image file with dimensions 2592 x 1936 to 1296 x 968 (JPEG file) and tried to upload it to the server. On the server I see that the file is saved with the 3.5 MB size.

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

Is there something that we can do while resizing with html5 canvas so that if we are decreasing the dimensions we could expect some decrease in the file size like compression.

推荐答案

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

If you are using toDataURL, you can set the second argument to a number between 0.0 and 1.0. This is the JPEG quality level, with 1.0 meaning very high quality and a very large image and nearer to 0.0 meaning lower quality smaller image.

例如，您可以尝试:

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

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

Here's a description in the w3c reference: www.w3.org: toDataURL

看起来 Firefox 中存在与忽略质量有关的错误，因此您可能需要在某些现代浏览器中进行测试.

It looks like there has been a bug in Firefox to do with ignoring the quality, so you might need to test in some modern browsers.

这篇关于Html5 画布调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！