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

Question

canvas.toDataURL(type, encoderOptions);

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

类型可选 指示图像格式的DOMString。默认类型是image/png。

我还没有找到所有的类型，因为我试图评估什么是可能在不同的情况下使用。

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

我知道以下几点：

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

但环顾四周，我似乎找不到可能的类型和编码器选项的列表.我只能找到这些了。其他的可能性是什么？

Answer 1

浏览器对图像输出格式的支持在很大程度上取决于实现。这是卫生工作组生活水平中最相关的一句

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

需要PNG；所有其他格式都是可选的。这一点通常在描述中解释。

canvas . toDataURL( [ type, ... ] ) 返回画布中图像的data: URL。 如果提供第一个参数，则控制要返回的图像的类型(，例如、PNG或)。缺省值是image/png；如果不支持给定类型，也使用该类型。其他参数特定于类型，并控制生成图像的方式，如下表所示。

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

序列化方法的参数 输入其他参数image/jpeg第二个参数，如果它是一个包含在0.0到1.0范围内的数字，则必须将其视为所需的质量级别。如果它不是一个数字或超出了该范围，用户代理必须使用它的默认值，就好像参数被省略了一样。

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

规范建议如何测试浏览器对任何特定格式的支持(但不幸的是，无法获得所有格式的支持，例如，作为列表)：

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

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

例如，值"image/png“表示生成PNG图像，值"image/jpeg”表示生成JPEG图像，值"image/svg+xml“意味着生成SVG图像(这将要求用户代理跟踪位图是如何生成的，这是一种不太可能的功能，尽管可能很棒)。

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

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

Answer 2

根据firefox 源代码，它们似乎支持：

• png
• jpeg
• ico
• bmp

Chrome每源代码，应该支持：

• webp
• png
• jpeg
• bmp

互联网浏览器的现代版本，应该是一样的火狐(祈祷手指)。

如果我需要投票“今天每一个”可用的选项，我将选择：PNG，JPEG和BMP。

质量影响选择：

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