Is there any method to shorten image data URI using javascript/jquery?

Question

I have converted a canvas image to data URI using jquery and the data URI is too long, say about 800,000 characters.

Is there any methods for reducing/shortening the length of the data URI?

I need to send the image data via GET/POST method but I got an error message that the string length is too long

What problems are you running into that makes the URI too long? — Austin Brunkhorst, May 28 '15 at 05:31
I need to send the image data URI as an attachment via GET/POST method but I got an error message that the string length is too long — Antony Varghese, May 28 '15 at 05:35
800k characters is about 780 kilobytes of data, or 0.76 megabytes, which shouldn't be a problem at all with a POST request. — adeneo, May 28 '15 at 05:37

score 6 · Answer 1 · answered May 28 '15 at 05:33

6

canvas.toDataURL() support different image types. You could try the different formats or use jpg and decrease the quality:

e.g. for 100% quality:

canvas.toDataURL("image/jpeg", 1.0)

or for 50%:

canvas.toDataURL("image/jpeg", 0.5)

This should reduce the image size and therefore the amount of image data.

answered May 28 '15 at 05:33

Nitek

2,515
2
23
39

You won't be able to reduce the amount of data by a resonable amount. As already suggested in the other comments: If you use POST for transmission, it shouldn't be a problem – Nitek May 28 '15 at 06:00

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

You cant.As this is the canvasimagedata(which is a base64 string).If you reduce it,some of the data maybe lost.Base64 itself is fairly compressed.You can check out JavaScript implementation of Gzip

You can try adjusting the image quality i.e (image/jpeg,value from 0-1) But this wont reduce it to a great extent.

edited May 23 '17 at 12:06

Community

1
1

answered May 28 '15 at 05:33

AkshayJ

771
6
15

Is there any method to shorten image data URI using javascript/jquery?

2 Answers2

Linked