What are the possible data types for canvas' toDataURL() function?

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.


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)

Tags:

Javascript

Recent Posts