应用data URI scheme在网页页面中嵌入照片应用详细

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

data URI scheme 容许大家应用内联(inline-code)的方法在网页页面中包括数据信息,能够在Html、CSS、Javascript 等中应用。

data URI scheme 常常用来将照片嵌入网页页面,应用以下:
<img alt="鹤四射的头像(您的访问器不适用 data URI scheme,照片没法显示信息)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*此处省略许多数据信息*/NONPmfvcqcdZR7XT27n//2Q%三d%三d"/>

data URI scheme 文件格式以下:
data:[<MIME-type>][;base64],<data>

这个文件格式较为简易,对比1下可获知,上面的 img 是1个应用 base64 编号的 jpg 照片。
将这个 img 嵌入到本网页页面中,显示信息以下:

除 base64 编号,还能够应用 %xx 方式的 16进制URL编号,以下:
<img alt="鹤四射的头像(您的访问器不适用 data URI scheme,照片没法显示信息)" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略许多数据信息*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/> _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略许多数据信息*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>" _fcksavedurl=""data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%01q/*此处省略许多数据信息*/%F7*q%D6Q%EDt%F6%EE%7F%FF%D9"/>"

转化成照片数据信息
依据上面的文件格式,大家能够撰写1个小程序流程开展转化成,但大家不必须这么不便,有许多网站出示这类(完全免费)服务。

下面得出几个:

1.http://dataurl.sveinbjorn.org/dataurlmaker

出示预览,拷贝便捷。

 

2.http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

出示预览, 还能转化成相应的CSS的URI data。 

 

3.http://software.hixie.ch/utilities/cgi/data/data

提醒:转化成不但限于照片数据信息,可使用3种方法(参照下图中的1、2、3),能够特定编号方法,但页面不友善。

在小组讲话中应用

点一下 插进/编写照片 按钮:

 

弹出下面的对话框,应用上面随意1个网站地址,转化成照片数据信息,拷贝粘贴至照片详细地址文字框中: 

 

点一下插进,OK了,以下图:

  

查询实际效果:http://space.cnblogs.com/group/topic/41938/