画布的 toDataURL() 函数可能的数据类型是什么？

Question

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?

Answer 1

Per the firefoxsource 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)

Answer 2

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 ( eg 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, eg, 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.

Answer 3

如https://bugzilla.mozilla.org/show_bug.cgi?id=1559743中所述，Firefox当前不支持webp。