canvas'toDataURL（）函数有哪些可能的数据类型？ [英] What are the possible data types for canvas' toDataURL() function?

问题描述

canvas.toDataURL(type, encoderOptions);

MDN 关于类型参数的说明如下：

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

类型 可选

DOMString 表示图像格式。默认类型是 image / png 。

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.

编辑：有关toDataURL（）的MSDN文章也没有真正帮助。

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

我知道以下内容：

• image / png 质量（编码器选项）似乎不影响输出


• image / jpeg 质量（编码器选项）影响输出


• image / webp 质量影响输出。 （根据MDN仅限Chrome）。

• 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?

推荐答案

图像输出格式的浏览器支持在很大程度上取决于实现。这是 WHATWG生活标准中最相关的句子：

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

用户代理必须支持PNG（ image / png ）。用户代理可以支持其他类型。如果用户代理不支持所请求的类型，则必须使用PNG格式创建文件。

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;所有其他格式都是可选的。这通常在标准 toDataURL description ：

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

canvas。 toDataURL（[type，...]）

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

返回数据：画布中图像的URL。

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

第一个参数（如果提供）控制要返回的图像的类型（例如 PNG或JPEG）。默认值为 image / png ;如果不支持给定类型，也会使用该类型。其他参数特定于类型，并控制图像的生成方式，如下表所示。

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.

spec 包含上述表格，但它只有一个条目：

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

序列化方法的参数

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.

因此，我们可以看到明确要求PNG作为默认值，如果浏览器选择支持JPEG ，则JPEG必须支持质量参数。将来，除了Web标准社区之外，我可以在该表中添加更多条目，以便为选择支持可选图像类型的供应商指定标准参数。

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

当尝试使用 image / png 以外的类型时，作者可以通过检查检查图像是否真的以所请求的格式返回查看返回的字符串是否以一个完全字符串 data：image / png，或 data：image / png; 。

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:

例如，值 image / png 意味着生成PNG图像，值 image / jpeg 将生成JPEG图像，值 i mage / svg + xml 将意味着生成一个SVG图像（这需要用户代理跟踪位图的生成方式，这是一个不太可能，但可能很棒的功能）。

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.

这篇关于canvas'toDataURL（）函数有哪些可能的数据类型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！