html resize 最小,Html5 Canvas resize

最新推荐文章于 2024-04-27 09:37:11 发布

转载最新推荐文章于 2024-04-27 09:37:11 发布 · 149 阅读

文章标签：

#html resize 最小

本文探讨了使用HTML5 Canvas进行图像尺寸调整时遇到的问题，即调整后的图像文件大小反而增加的现象。通过设置toDataURL方法中的JPEG质量参数，可以有效地减小调整尺寸后的图像文件大小。

问题

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.

For example,

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.

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.

回答1:

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.

So, for example, you could try:

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

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

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.

来源：https://stackoverflow.com/questions/7168375/html5-canvas-resize