Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghinda opened this issue Nov 25, 2012 · 9 comments
Open

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

ghinda opened this issue Nov 25, 2012 · 9 comments

Comments

@ghinda
Copy link

ghinda commented Nov 25, 2012

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):

Workarounds:

@revolunet
Copy link

Works here on nexus 4 With Android 4.2.1

@ghinda
Copy link
Author

ghinda commented Jan 31, 2013

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
Copy link

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
Copy link

ruanb7 commented May 27, 2014

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

Bump.

@emekamicrosoft
Copy link

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

@aruncnt
Copy link

aruncnt commented Nov 28, 2014

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

@frontenddeveloping
Copy link

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
Copy link

gwyy commented Dec 2, 2014

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

@gwyy
Copy link

gwyy commented Dec 2, 2014

我自己写了个代码解决了 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); }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants