base64编码介绍

Base64是网络上常用的8-8位字节码编码方法。base64可以用来在http环境下传输长的标识信息，也可以用在URL中。base64不怕可读性，所以有一定的加密功能。

为什么要把图片转换成base64编码？

将图片转换为base64代码可以减少http请求，因为图片可以以字符编码的形式直接传输给客户端，http请求是以文件的形式需要的。但是也有一个小缺点，就是把图片编码成base64的时候，尺寸会变大，但是经过gzip优化后基本是一样的。因此，在应用过程中，较小的图片可以直接编码为base64，而较大的图片不建议这样使用。

html5如何将图片转换成base64？

Html5如果想把图片转换成base64，需要使用html5的一个接口FileReader.readAsDataURL()。这个接口可以把文件转换成base64编码格式，然后以数据的形式显示：URL。

示例程序

下面的代码是一个示例程序。创建一个新的html文件，然后复制并粘贴代码。您可以通过在支持html5的浏览器中打开它来查看效果。

复制代码

代码如下：

！声明文档类型

超文本标记语言

头

meta charset='utf-8' /

titlehtml5图像到base64/title

/head

身体

脚本类型='text/javascript '

window.onload=function(){

//抓取上传的图片，转换代码结果，显示图片的dom

var img _ upload=document . getelementbyid(' img _ upload ')；

var base64 _ code=document . GetElementbyID(' base64 _ code ')；

var img _ area=document . getelementbyid(' img _ area ')；

//添加开始监听事件的功能

img _ upload . addevent listener(' change '，readFile，false)；}

函数readFile(){

var file=this . files[0]；

if(！/image///w /。test(file.type)){

警报('请确保文件是图像类型')；

返回false

}

var reader=new FileReader()；

reader.readAsDataURL(文件)；

reader.onload=function(){

base64 _ code . innerhtml=this . result；

img _ area . InnerHTML=' div picture img tag display:/div img src=' this。结果' ' alt=' '/'；

}

}

/script

输入类型='file' id='img_upload'/

text area id=' base64 _ code ' row=' 30 ' cols=' 360 '/text area

p id='img_area'/p

/body

/html

Html5图像转换base64代码

程序的设计思路

1.创建三个html标签，输入用来上传图片，textarea用来显示base64代码，因为base64代码有很多内容，所以使用textarea标签，p标签用来显示图片。

2.用js调用html5的FileReader.readAsDataURL()的API，声明用三个变量来控制图像上传、base64代码显示和图像显示。

3 . img _ upload . addevent listener(' change '，readFile，false)；添加一个监听事件，如果上传的文件发生变化，执行读取文件功能。

4.4.readFile函数的内容是调用接口，把图片转换成base64，然后输出。

5.在执行转换和输出之前，确定上传的文件是否是图片。

代码解析及注意

1 . var file=this . files[0]；下面是抓取上传的对象。

2.this.result此结果是FileReader.readAsDataURL()接口中转换后的图片输出的base64结果，存储在结果中。向代码中添加console . log(reader)；您可以通过查看FileReader对象来查看。(reader是我自己对象的名字)

我用html5把图片转换成base64代码，主要是把图片写入浏览器的本地数据中使用，然后在上传的时候尝试恢复上传图片。目的是减少本地浏览器应用程序和服务器之间的数据通信。