简单实现base64编码与图片之间相互转换的功能

编辑:管理员 发布时间:2021-11-28 16:00:461244

在一些网站的网页中,我们在查看代码时发现有些网页的图片引用地址不是图片的url地址,而是以data:image/png;base64开头的编码,后面一大串超长的无序乱码一样的字符串.那么这是什么呢?

它是在RFC2397中定义的Data URI scheme,支持的类型有text/plain文本以及HTML代码text/html、text/css、text/javascript、image/gif、image/png、image/jpeg、image/x-icon等类型的base64编码数据.

它可以将一些较小的数据不用外部文件的引用载入,直接将数据嵌入到网页中去,这样它就可以减少页面的请求.

为什么这么说呢,比如我们打开一个网页时,加载每个图片都会发送依次http请求来下载到浏览器缓存中,而将图片直接转为base64编码的数据随着html直接下载到浏览器中,不用再发送多余请求,但不会浏览器不缓存该图片.

虽然base64编码能够减少图片的请求,但是会加大css文件的大小,增加css解析时间,所以较大图片一般都采用CssSprites技术,而将图片转为base64编码后对于较小的或用处特殊无法使用CssSprites的图片来说,还是比较好的选择.

Base64是一种最常见的二进制编码方法

那么进入主题,怎样将base64编码的图片转为正常的图片呢?

示例:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAjCAYAAAD48HgiJI=

比如上面那串字符,其实是一张小图片,data代表数据协定名称,数据类型名称是image/png, 数据的编码方法为base64,base64的逗号后面就是该image/png文件的base64编码后完整的字符串数据.

1、我们完全可以将它直接复制到在火狐、谷歌等常用的浏览器上方的地址栏中,然后按下enter键即可打开该图片,在打开的图片上右键选择图片另存为,给图片重命名下即可将base64编码转为图片.

2、新建一个空白文档,然后将其另存为一个html文件,右键选择打开方式-记事本,修改其中的代码

<img src="需要解码base64字符串编码" />

在该代码的src地址处将需要解码的base64编码直接只复制替换到这个地方,然后保存。双击用浏览器打开该html页面,然后就会看到显示出来的图片,然后同理,鼠标指针移动到图片上,右键另存为图片,修改名称保存图片.

3、与第二种保存方法类似,既然直接给html中img标签赋值就可以加载图片,那么我们可以直接利用html5特性,给a标签赋值,给其一个download属性就可以实现直接下载该图片,而无需多余操作.

<a href="base64图片编码" target="_blank" download="下载图片">下载图片</a>

修改代码的href地址为base64编码,将代码写进新建的html文件中去即可.

在很多网站中的图片base64编码互转工具中也是运用了这一个方法.

代码示例:

<input type="file" name="选择图片" id="basefile" />

<textarea id="wqtool-aaa"></textarea>

<button id="wqtool-ccc" onClick=" huanyuan();">base64转为图片</button>

<div id="xzpic"></div>

<script type="text/javascript">

var tupiandizhi = document.getElementById("basefile");

var wqtoolbase= document.getElementById("wqtool-aaa");

var xzpic = document.getElementById("xzpic");

tupiandizhi.addEventListener('change',dqbase,false);

function dqbase(){

var file = this.files[0];

var wqtoolbase= document.getElementById("wqtool-aaa");

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){

wqtoolbase.innerHTML = this.result;

}

} ;

function huanyuan(){

var wqtoolbase= document.getElementById("wqtool-aaa").value;

xzpic.innerHTML = '<img src="'+wqtoolbase+'" /> <a href="'+wqtoolbase+'" target="_blank"  download="1.png">点击下载</a>';

}

</script>

为了在前端html页面简单实现base64与图片文件相互转换的功能,以上代码主要靠readAsDataURL方法读取指定flie对象中base64编码以及a中的download属性

我们只需要在flie上传组件选择需要转为base64编码的图片即可将readAsDataURL方法方法读取到的base64字符通过 document.getElementById("wqtool-aaa").value显示在id为wqtool-aaa的文本框中。

或者将文本框中的字符串通过js的document.getElementById读取为变量wqtoolbase,将其赋值给img标签的src属性与a标签的href属性,再用html5中新增的download直接对引用的数据进行下载即可得到从base64编码转为图片的文件.

将以上代码复制到按照之前的新建文本另存为html文件的办法后拖入到浏览器中运行该html文件,这样我们就制作了一个简单的功能实用纯前端实现的base64与图片相互转换的在线工具.

除了前端实现方法,在后端代码中,有着许多自带的base64函数或编码库可以直接便捷的实现这样的base64图片编码相互转换效果.

TAGS: js 图片处理
热门文章
最新文章

热门标签

路径命令行表单字符符号nginxcookiejavapython数组文字处理小数服务器管理apache图片处理php