HTML5将图像为Base64的实例代码
Base64编码的介绍base64编码方法在网络常用的8bit字节码。Base64编码可用于在HTTP传输长环境识别信息，可以使用URL，因为Base64是不怕的可读性，因此具有一定的加密功能。
你为什么要将图片转换成Base64编码吗
转换图片为Base64编码可以减少HTTP请求，因为图片可以直接传送到客户端的字符编码的形式，和文件格式需要HTTP请求。但会有一个小缺点，就是图片的编码Base64将更大的尺寸，但它是几乎相同的gzip优化后，在应用的过程中，较小的图片可以直接编码为base64，和更大的图片，不推荐。
如何转换成Base64 HTML5的照片吗
HTML5，如果你想转换图片为base64，你需要使用一个HTML5的界面filereader.readasdataurl（）接口说明接口可以将文件转换成Base64编码格式，然后将以数据的形式显示：URL。
示例程序
下面的代码是一个示例程序，它创建一个新的HTML文件，然后用支持HTML5的浏览器复制和粘贴代码以查看效果。
复制代码代码如下所示：
HTML5图像进行
在window.onload =函数（）{
抓取/上传图片，代码转换结果显示DOM的图片
无功img_upload = document.getelementbyid（img_upload ）；
无功base64_code = document.getelementbyid（base64_code ）；
无功img_area = document.getelementbyid（img_area ）；
添加监视事件的功能
img_upload.addeventlistener（‘变'，ReadFile，false）；}
函数ReadFile（）{
var文件=这个文件{ 0 }；
如果（！测试文件（文件类型））{
警报（请确保该文件是图像类型）；
返回false；
}
VaR的读者= FileReader（）；
reader.readasdataurl（文件）；
Reader.onload=function () {
base64_code.innerhtml = this.result；
img_area.innerhtml =图片img标签显示：'；
}
}
HTML5的图片转换base64编码
程序设计思想
1、创建三个HTML标签，输入是用来上传图片和文本是用来显示Base64编码，因为Base64编码的内容很多，所以文本标签和p标签是用来显示图片。
2。用JS调用HTML5的filereader.readasdataurl（）API，宣布三个变量是用来控制图像上传、Base64编码的显示，图片显示。
3.img_upload.addeventlistener（‘变'，ReadFile，false）；添加一个监听器，事件和执行ReadFile函数如果文件上传。
的内容是4.readfile函数调用接口，转换成Base64和再输出图片。
5。在转换和输出执行之前，判断上传的文件是否为图片。
代码分析与注意
这1.var文件。文件{ 0 }；这里是被用来上传的对象。
这样的结果是导致2.this.result base64转换图片输出的filereader.readasdataurl（）接口和存储在结果。添加console.log（读者）的代码；看看FileReader对象。（读者是自己的对象。名字）
我用HTML5将图片转换成Base64编码。其目的是将图片写入浏览器的本地数据。上传时，我尝试恢复上传图片，目的是减少本地浏览器应用程序与服务器之间的数据通信。
总结
以上就是本文的全部内容，希望能给大家的学习或工作带来一定的帮助。如果有问题，你可以留言。