base字符串与图片相互转换实例

二.图片转base字符串

分为两种，一种是提供图片的src标签，另一种是通过上传图片文件。

三.提供图片的src标签

需要借助canvas标签来完成。
优点是……可以缩放图片大小？

缺点是不能跨域（但另外一个也不行）

顺序如下：
1. 用户提供src
2. 创建新的img标签，并将src设置给img标签
3. img标签加载完毕（onload回调触发），继续执行以下代码：
4. 将该图片写入canvas（此时可以根据图片大小设置该canvas的大小，或者让图片自适应canvas的大小）
5. 通过canvas的toDataURL方法获取base字符串
6. 输出该base字符串；

四.文件上传形式
需要input标签支持type=file，需要使用FileReader对象
优点是选完文件后自动转换，操作更简单一些。
顺序如下：
1.当type=file的input标签触发onchange事件时，开始执行以下指令
2.创建一个新的FileReader对象；
3.使用其的readAsDataURL这个API，读取文件内容；
4.当读取成功时（触发onload回调函数），可以通过回调函数的参数e，利用属性e.target.result获取base字符串；
5.该base字符串即为所需要的内容。

五.DEMO页面：

图片转为base字符串
base字符串转为图片