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

时间:2015-02-16 15:05:20

标签: javascript

canvas.toDataURL(type, encoderOptions);

MDN有关 type 参数的说明如下:

  

输入 可选
   DOMString 表示图像格式。默认类型为 image / png

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

编辑:MSDN's article关于toDataURL()并没有真正帮助。


我知道以下内容:

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

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

2 个答案:

答案 0 :(得分:10)

根据 firefox source code,他们似乎支持:

  • PNG
  • JPEG
  • ico
  • BMP
每个source code

Chrome 应支持:

  • WEBP
  • PNG
  • JPEG
  • bmp

Internet Explorer 现代版本,应该类似于Firefox (交叉手指)。

如果我需要投票选出“今天”选项,我会选择: PNG,JPEG和BMP

质量影响选项:

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

答案 1 :(得分:4)

图像输出格式的浏览器支持在很大程度上取决于实现。这是the most relevant sentence in the WHATWG living standard

  

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

PNG是必需的;所有其他格式都是可选的。这在standard's toDataURL description

中有一般性解释
  

<强> canvas . toDataURL( [ type, ... ] )

     

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

     

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

规范contains a table as mentioned above,但它只有一个条目:

  

序列化方法的参数

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

该规范建议如何测试浏览器对任何特定格式的支持(但遗憾的是不支持如何支持所有格式,例如,作为列表):

  

当尝试使用&#34; image/png&#34;以外的类型时,作者可以通过检查返回的字符串是否以其中一个开头来检查图像是否真的以请求的格式返回完全字符串&#34; data:image/png,&#34;或&#34; data:image/png;&#34;。

还有一个关于可选浏览器支持的补充说明:

  

例如,值&#34; image/png&#34;将意味着生成一个PNG图像,价值&#34; image/jpeg&#34;将意味着生成一个JPEG图像,值为&#34; image/svg+xml&#34;将意味着生成一个SVG图像(这将要求用户代理跟踪如何生成位图,这是一个不太可能,但可能很棒的功能)。

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

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