canvas.toDataURL('image/jpeg') returns image/png on Android

[ghinda]

Summary:

The toDataURL() method of the canvas element allows specifying the format in which to return the data url. By default it returns image/png, but specifying image/jpeg should return a JPEG image.

On Android, it always returns a image/png data url, regardless of the type parameter.

On desktop, Chrome returns the proper data url with the image/jpeg type.

More details:
http://ghinda.net/jpeg-blob-ajax-android/

Platforms:

• Android 4+

How to reproduce:

1. Check the example on Android 4+

Reduced Example:

http://jsfiddle.net/ghinda/na86m/

Bug Tracker ticket(s):

• Android 4+ Browser: canvas.toDataURL('image/jpeg') returns image/png

Workarounds:

• Use a JavaScript-based JPEG encoder https://ghinda.net/article/jpeg-blob-ajax-android/

[revolunet]

Works here on nexus 4 With Android 4.2.1

[ghinda]

Have only tested on 4.0.4 and 4.1 (and on CyanogenMod 10, based on 4.1).

Can't test on 4.2, but since you mention it's working, I'm guessing it was fixed sometime between 4.1 and 4.2.1.

[patrickkettner]

For what its worth, I don't think this is a 'bug' technically. They are following the spec

image/png is used when the format requested is not supported/understood. (http://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html#dom-canvas-todataurl)

defiantly worth knowing you can't make a jpeg though.

[ruanb7]

Android 4.2.2 with Phonegap Android app, still only supporting png and NOT jpeg.

Bump.

[emekamicrosoft]

this works in firefox, oCanvas.toDataURL("image/jpeg")

[aruncnt]

How To post this image on server ? I mean upload .

[frontenddeveloping]

UA must support by spec image/png mime-type only. Other types - as UA wants.
Also as @patrickkettner notes if mime-type is not support - UA will returnimage/png type.
+1 for not a bug.

[gwyy]

我也是遇到了这个问题，是不是 Android 不支持 jpeg 所以就用默认的 png 来实现了 那么我在服务端还要判断下是否是png

[gwyy]

我自己写了个代码解决了 if 判断下 如果不是jpeg 那么 引入第三方类 转换成 jpeg
try{
url=canvas.toDataURL("image/jpeg",1);
}catch(e){
toDataURLFailed=true; // android may generate png
}

if( (toDataURLFailed || url.slice(0,"data:image/jpeg".length) !== "data:image/jpeg") ){
try{
var encoder = new JPEGEncoder();
url= encoder.encode(ctx.getImageData(0,0,w,h), 100);
}
catch(e){ alert(1); }
}