图片格式的数据转换成base64格式，可以便于程序以字符串的格式传输和存储。如果是在网页上直接远程请求服务器图片资源，需要在网页加载之后再单独请求图片资源，使用base64的方式，就可以将图片以字符串的形式和网页一起返回给浏览器了
工具/原料
1
html5
2
网页浏览器
方法/步骤
1
为了演示下如何操作，首先创建一个测试的html页面，添加如图的测试标签和js代码主要是添加一个file表单用来选择系统的图片资源，然后就是new FileReader对象读取和转换base64字符串
2
打开浏览器访问测试页面，如图，可以看到一个图片选择框，下面就是转换按钮和base64字符串显示的多行文本框
3
点击选文件按钮，从系统中选择一个测试的图片资源，随便选择一个即可，用于测试使用
4
图片选择完成之后，点击转换base64按钮，调用自定义的toBase64的js函数，FileReader将转换之后的图片数据以base64格式的字符串显示在多行文本框中前面是数据类型信息，后面就是base64编码之后的图片数据
5
转换之后的base64数据可以直接放在img标签中使用，可以做一个预览的效果，如图添加一个img标签，然后js的方式把base64的数据赋值给img的src属性
6
刷新浏览器查看效果，可以看到直接使用转换之后的base64数据可以正常的显示图片信息。
注意事项
FileReader对象是h5才可以使用的，之前的应该是不支持的。
上一篇：七种剪纸的基本剪制方法