图片base64编码利器:在线 Data URI 生成工具 – Duri.me

Duri me是一个在线将图片转换成Base64代码的在线应用,无需注册完全免费使用。正常情况下我们发布一篇文章要插入图片,首先要上传图片,然后再调用图片。现在你只要将图片上传到Duri me,Duri me会将你的图片转换成代码,我们只要复制Duri me生成的代码到文章内就可以实现图片显示。

图片base64编码利器:在线 Data URI 生成工具 – Duri.me

登陆网站后,把图片拖入网页中的上传框内,然后点击“Generate Base-64 Code”开始转换,转换成功后就可以复制代码自由使用了。copy code as image 复制直接插入文章就可以显示图片,copy code as css 复制可以插入CSS文件内调用,copy code as base64 复制图片的base64代码,可以随意使用。

图片base64编码利器:在线 Data URI 生成工具 – Duri.me

常见问题和兼容性

下文介绍一些在使用 data URIs 时遇到的常见问题:

语法:data URIs 的格式很简单,但很容易会忘记了在 "data:" 协议名后面必须有一个逗号(MIME类型和"base64"都是可省略的),或者在对数据进行 base64 编码时发生错误。

HTML代码格式化:一个data URI 是作为了一个文件内的文件,所以在嵌入其他文档的内部时,这个data URI 所在的行就会非常的长,所以应当用空白符(换行符、制表符、 空格)来对它进行格式化,但如果数据是经过base64编码过的,就可能会遇到一些问题。

长度限制:虽然 Mozilla 支持无限长度的 data URIs,但是标准中并没有规定浏览器必须支持无限长度的 data URIs。比如 Opera 11 限制 data URIs 的长度最多为 65000 个字符。

不支持查询字符串:一个 data URI 的数据字段是没有结束标记的,所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段

注意:从Firefox 6开始,data URI 中的锚点标记(#)会像在其他普通网页 URI 上一样可被识别,因此,如果想要表示文件内容中的 "#",必须将它转义为'%23'。

浏览器兼容性:已经支持 data: 协议的浏览器有 Opera 7.20 及其以上版本,Safari 和 Konqueror。Internet Explorer 7 及以下版本不支持,Internet Explorer 8 及以上版本只支持在 CSS 文件中使用 data URIs 格式的图片。



相关阅读

如何用HTML5的FileReader生成Data Url


未经允许请勿转载:程序喵 » 图片base64编码利器:在线 Data URI 生成工具 – Duri.me

点  赞 (0) 打  赏
分享到: