HTML5: Canvas.toDataURL() always returns PNG instead of JPG
Question by Guest | Last update on 2021-04-06 | Created on 2016-09-21
I am using the function .toDataURL() offered by an HTML 5 Canvas element for getting the image as base64 encoded string. The problem is that no matter where I go, the result is always in PNG format, even if I actually want to have a JPG. The string is always starting with "data:image/png;base64;".
I have tried the following possibilities:
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
var dataURL = canvas.toDataURL("image/jpeg");
var dataURL = canvas.toDataURL();
var dataURL = canvas.toDataURL("image/png");
As far as I know, only the last line should return a PNG image. What am I doing wrong?
Related Topics
How to resize Image before Upload in Browser
Tutorial | 13 Comments
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 2 - Drawing Lines
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
The default format of .toDataURL() is PNG.
Therefore, the last two lines should both return the image as PNG (no specification of the format or explicit specification of image/png).
PNG was the first format that was supported by the browsers. That is why there are some browsers out there indeed only supporting the PNG format and nothing else. Such browsers are always returning PNG no matter what you have specified. In this respect, this behavior is even correct, because according to the specification, PNG should be the format of choice in each case, the desired format is not supported.
In your case, I would try updating your browser and trying it again then. Perhaps, you are still using a version that is only feasible of PNG.
Last update on 2021-04-06 | Created on 2016-09-22