base64字符串与图片的相互转换

悠悠 2021-09-14 21:18 680阅读 0赞

一.base64字符串转图片  
原理是当base64字符串作为img标签的src属性时，如果是有效的，则可以预览。  
而若要下载，则  
创建一个新的a标签  
将a标签的href属性设置为该base64字符串  
设置a标签的download属性为文件名  
再通过js手动触发该a标签的点击事件，则完成了下载行为（具体视浏览器可能需要选择下载目录或者使用默认目录）。  
  
二.图片转base64字符串  
  
分为两种，一种是提供图片的src标签，另一种是通过上传图片文件。

三.提供图片的src标签

需要借助canvas标签来完成。  
优点是……可以缩放图片大小？  
  
  
缺点是不能跨域（但另外一个也不行）  
  
  
顺序如下：   
1. 用户提供src   
2. 创建新的img标签，并将src设置给img标签   
3. img标签加载完毕（onload回调触发），继续执行以下代码：   
4. 将该图片写入canvas（此时可以根据图片大小设置该canvas的大小，或者让图片自适应canvas的大小）   
5. 通过canvas的toDataURL方法获取base64字符串   
6. 输出该base64字符串；  
  
  
四.文件上传形式  
需要input标签支持type=file，需要使用FileReader对象  
优点是选完文件后自动转换，操作更简单一些。  
顺序如下：  
1.当type=file的input标签触发onchange事件时，开始执行以下指令  
2.创建一个新的FileReader对象；  
3.使用其的readAsDataURL这个API，读取文件内容；  
4.当读取成功时（触发onload回调函数），可以通过回调函数的参数e，利用属性e.target.result获取base64字符串；  
5.该base64字符串即为所需要的内容。

五.DEMO页面：

[图片转为base64字符串][base64]  
[base64字符串转为图片][base64 1]

[base64]: http://www.jianwangsan.cn/%E5%9B%BE%E7%89%87tobase64.html
[base64 1]: http://www.jianwangsan.cn/base64to%E5%9B%BE%E7%89%87.html