canvas.toDataURL does not result in image/jpeg data

Question

I am trying to save html5 canvas data to server using base64 + phonegap 2.5.

platforms : windows phone 7 and 8 , Android and IOS.

Basic need for image resizing is to optimize data before send over server.

I am having issue with android platform base64 response method which are as follows

Problems :

1. Android 4.2 : I wrote this code c.toDataURL("image/jpeg"); but i got this data:image/png;base64
2. Android 2.3 : I am unable to retrieve base64 data

Am I doing anything wrong ?

Solution 1

• Android 2.3 : I am unable to retrieve base64 data

canvas.toDataURL is not supported in old Android versions.

There's a js fix for that but performance might not be very good: https://code.google.com/p/todataurl-png-js/

Check here for more info: toDataURL not working on android browsers

• Android 4.2 : I wrote this code c.toDataURL("image/jpeg"); but i got this data:image/png;base64

Android 4.x supports canvas.toDataURL; however, it doesn't support jpeg format (if you ask for a jpeg, it will return a png).

More details: https://github.com/scottjehl/Device-Bugs/issues/33

Solution 2

Only image/png is supported by old browsers (WebKits) and this is the only codec you can rely to be present. img/jpeg get added later on and is still not supported by many browsers.

For Android 2.3: try if you can do it in vanilla browser. If it works there then it is a PhoneGap issue and should be reported to the authors.

Comments

[Milan V.]

Thanks a lot for your replay Luis. it helps me a lot.

[Adam Marshall]

chrome on android 4.1+ seems to give "image/jpeg" if you ask for it