老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

base64字符串转换成图片展示

WEB前端 BlandonTsai 6708℃ 0评论

最近在处理驾校系统的指纹及电子签名数据时,第一次遇到了所谓了base64字符串编码。这种编码把指纹或者电子签名图片数据转换成字符串,然后保存在数据库中。以便后期进行指纹数据比对或者电子签名的调用。

开始处理时,我原以为把库中的base64编码串取出来,封装成byte流,转换成图片,最终打印输出到页面上就行了。但是查看了一些资料发现还是无从下手,图片文件往往涉及到路径信息(path)。而base64源数据是直接从数据库里取出来,展示到页面上的,逻辑类似于在页面上打印验证码。

指纹资料图

html可以直接把base64字符串转换成图片

后来请教了一下同事,发现根本不需要对base64字符串进行图片流的封装,可以直接打印到页面上。

base64输出格式

这就是所谓的Data URI scheme。Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张160×42的电子签名png图片。

在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

Data URI scheme支持的类型

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’))。目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

举个图片的例子:

网页中一张图片可以这样显示:

也可以这样显示:

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

转载请注明:似水流年 » base64字符串转换成图片展示

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
头像
发表我的评论
取消评论