canvas'toDataURL()函数有哪些可能的数据类型？

Question

canvas.toDataURL(type, encoderOptions);

MDN对类型参数的描述如下:

键入 可选
甲DOMString指示图像格式.默认类型是image/png.

我还没有找到所有类型的东西,因为我正在尝试评估在不同情况下可以使用的内容.

编辑:MSDN关于toDataURL()的文章也没有真正帮助.

---

我知道以下内容:

• image/png 质量(编码器选项)似乎不影响输出
• image/jpeg 质量(编码器选项)影响输出
• image/webp质量影响输出.(根据MDN仅限Chrome).

但环顾四周之后我似乎无法找到可能的类型列表及其编码器选项...这几乎是我能找到的全部内容.还有什么其他可能性？

Answer 1

根据firefox 源代码,他们似乎支持:

• PNG
• JPEG
• ICO
• BMP

Chrome每个源代码,应该支持:

• WEBP
• PNG
• JPEG
• BMP

Internet Explorer现代版本,应该与Firefox(交叉手指)相似.

如果我需要投票"今天"可用选项,我会选择:PNG,JPEG和BMP

质量影响选择:

• JPEG,质量百分比,其中0为0%,0.5为50%,1为100%
• BMP,BPP,每像素字节数(感谢@apsillers指出)

Answer 2

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

用户代理必须支持 PNG (" image/png")。用户代理可能支持其他类型。如果用户代理不支持请求的类型，它必须使用 PNG 格式创建文件。

PNG 是必需的；所有其他格式都是可选的。这通常在标准的toDataURL描述中解释：

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

返回data:画布中图像的URL。

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

该规范包含一个如上所述的表格，但它只有一个条目：

序列化方法的参数

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 标准社区之外，我还可以向该表添加更多条目，以便为选择支持可选图像类型的供应商指定标准参数。

该规范建议了如何测试浏览器对任何特定格式的支持（但不幸的是，并没有说明如何获得所有格式的支持，例如，作为列表）：

当尝试使用“ image/png”以外的类型时，作者可以通过检查返回的字符串是否以确切的字符串“ data:image/png,”或“ data:image/png;”之一开头来检查图像是否确实以请求的格式返回。

还有一个关于可选浏览器支持的附加说明：

例如，值“ image/png”表示生成 PNG 图像，值“ image/jpeg”表示生成 JPEG 图像，值“ image/svg+xml”表示生成 SVG 图像（这将要求用户代理跟踪位图已生成，这是一个不太可能但可能很棒的功能）。

这显然留下了大量允许的格式，但只有一种必需的格式。

浏览器是否支持特定的图像序列化格式完全取决于每个浏览器。