29
canvas.toDataURL(type, encoderOptions);

MDN's description about the type parameter says the following:

type Optional
A DOMString indicating the image format. The default type is image/png.

I have yet to find what all the types are, as I'm trying to evaluate what is possible to use in different cases.

Edit: MSDN's article about toDataURL() doesn't really help either.

I know about the following:

  • image/png quality (encoder options) doesn't seem to influence output
  • image/jpeg quality (encoder options) influences output
  • image/webp quality influences output. (Chrome-only according to MDN).

But after looking around I can't seem to find a list of possible types and their encoder options... that's pretty much all I could find. What are the other possibilities?

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
  • Guess it depends on the implementing browser. MSDN docs says it is typically `image/png` or `image/jpeg` - so we can assume those are the valid ones in MSIE. – techfoobar Feb 16 '15 at 15:08
  • 2
    The spec only mentions PNG and JPEG, but the wording does not seem explicitly restrictive. – Pointy Feb 16 '15 at 15:09
  • Also the spec says that you can ask for anything you want, and then if the runtime can't do that you'll get PNG back (and you can determine whether that's the case by examining the returned string). – Pointy Feb 16 '15 at 15:12
  • The MDN doc you post also mentioned about `image/webp` – Passerby Feb 16 '15 at 15:12
  • https://kangax.github.io/jstests/toDataUrl_mime_type_test/ – xjlin0 Sep 08 '22 at 01:36

2 Answers2

16

Per the firefox source code, they seems to support:

  • png
  • jpeg
  • ico
  • bmp

Chrome per the source code, should support:

  • webp
  • png
  • jpeg
  • bmp

Internet explorer modern versions, should be alike to Firefox(crossing fingers).

If I need to vote the "per today" available options, I will go with: PNG, JPEG, and BMP

Quality influences options:

  • JPEG, quality percent, where 0 is 0%, 0.5 is 50% and 1 is 100%
  • BMP, BPP, bytes per pixel (thanks to @apsillers for pointing out)
Daniel Aranda
  • 6,426
  • 2
  • 21
  • 28
6

Browser support for image output formats is largely implementation dependent. Here's the most relevant sentence in the WHATWG living standard:

User agents must support PNG ("image/png"). User agents may support other types. If the user agent does not support the requested type, it must create the file using the PNG format.

PNG is required; all other formats are optional. This is explained generally in the standard's toDataURL description:

canvas . toDataURL( [ type, ... ] )

Returns a data: URL for the image in the canvas.

The first argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given type isn't supported. The other arguments are specific to the type, and control the way that the image is generated, as given in the table below.

The spec contains a table as mentioned above, but it only has one entry:

Arguments for serialisation methods

Type          Other arguments
image/jpeg    The second argument, if it is a number in the range 0.0 to
                1.0 inclusive, must be treated as the desired quality level.
                If it is not a number or is outside that range, the user
                agent must use its default value, as if the argument had
                been omitted.

So, we can see that PNG is explicitly required as the default, and JPEG must support a quality argument if the browser chooses to support JPEG. In the future, I except Web standards community could add more entries to that table, in order to specify standard arguments for vendors that choose to support optional image types.

The spec suggests how to test for a browser's support of any particular format (but unfortunately not how to get all formats supported, e.g., as a list):

When trying to use types other than "image/png", authors can check if the image was really returned in the requested format by checking to see if the returned string starts with one of the exact strings "data:image/png," or "data:image/png;".

There is one additional note about optional browser support:

For example, the value "image/png" would mean to generate a PNG image, the value "image/jpeg" would mean to generate a JPEG image, and the value "image/svg+xml" would mean to generate an SVG image (which would require that the user agent track how the bitmap was generated, an unlikely, though potentially awesome, feature).

This clearly leaves a huge range of allowed formats, but only one required format.

Whether a browser supports a particular image serialization format is purely up to each browser.

apsillers
  • 112,806
  • 17
  • 235
  • 239