转DataURL在Web浏览器中的兼容性总结

Posted 2020-06-28 神奇的旋风

1. IE8+，Firefox，Chrome，Opera，Safari 等现代浏览器普遍支持data URL
2. IE8 data URL 最大长度限制为32k字节，超出无效。IE9+没有这个限制
3. IE只识别base64编码或百分号编码(URL编码, encodeURIComponent)的data URL，IE不识别无编码的data URL，非IE浏览器可识别无编码的data URL
4. IE不支持对<iframe>,<frame>标签的src设置data URL
5. IE官方说法说data URL仅支持以下5种使用场景：
   • object (images only)
   • img
   • input type=image
   • link
   • CSS declarations that accept a URL
6. 据本人实测，IE也在除了官方所述5种之外的其它场合支持data URL：
   1. a href
   2. meta refresh. 示例：
      
      [html] view plain?

      1. <meta http-equiv="refresh" content="5;URL=data:text/html;base64,xxxx....">  
   3. script src
   4. window.open
   5. embed src
7. 对于audio, video一类的元素，往往资源文件较大，使用data URL并不常见，我也没有对其进行测试。
8. Firefox中粘贴截图是直接转换为data URL的图片，其它浏览器干脆无法粘贴，我记得以前Chrome好像可以粘贴截图的，今天再测Chrome,Opera都不能粘贴截图(<div contenteditable></div>做的测试).   （粘贴截图常用于在线富文本编辑器）
9. 可为data URL指定字符集编码。示例：data:text/plain;charset=US-ASCII,xxxx....

 

 

附录：

DataURL语法规则：

 

       dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

 

 

DataURL规范：rfc2397

维基百科词条：Data URI scheme

最好的在线生成DataURL网站：Data Url Maker  页面简洁，支持文件拖放，支持对指定网址的CSS文件做data URL优化。

from：http://blog.csdn.net/cuixiping/article/details/14215947