canvas' toDataURL(） 函数可能的数据类型是什么?

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

本文关键字：数据类型 是什么 函数 toDataURL canvas      更新时间：2023-11-19
canvas.toDataURL(type, encoderOptions);

MDN 关于类型参数的描述如下：

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

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

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

我知道以下内容：

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

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

根据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指出(

浏览器对图像输出格式的支持在很大程度上取决于实现。以下是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图像(这将要求用户代理跟踪位图的生成方式，这是一个不太可能但可能很棒的功能(。

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

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

相关文章：