Limit image size (<1 MB) when resizing HTML5 canvas

Question

I have an HTML5 downloader for images. I upload two images for any image that the user has selected. One is 64x64 and the other is 320x240. I use canvas.drawImage()to resize images. Everything is working fine.

However, how can I make sure the images after resizing are <= 1MB. Does the image size after resizing depend on the browser used?

Answer 1

You cannot guarantee the size, because the resulting compressed file depends on the content, how much it will be compressed.

( , ..), , ( JPEG), .

. Canvas - 32 , 8- RGB (24-) + 8- .

PNG, RGBA - :

width * height * 4 = size in bytes

JPEG, RGB:

width * height * 3 = size in bytes

JPEG , PNG, , toDataURL(type [, quality= [0.0, 1.0]]).

:

320 x 240 x 4 = 307 200 bytes (/ 1024 = 300 kb / 1024 = 0.29 mb).

RGB ( )

320 x 240 x 3 = 230 400 bytes (/ 1024 = 225 kb / 1024 = 0.22 mb).

URI , base-64. Base-64 33% - ( , -uri, IIRC 14-20 ).

, 1 .