随笔-base64编码

1、 字符串Base64编码

之前自定义了一个了富文本的编辑器，然后因为编辑器的内容要存进数据库，但是编辑器的文本带了标签导致后端处理出错，所以需要进行转码，使用时再进行解析：
首先： 进行转码-btoa(window.encodeURIComponent(字符串))
（如果不是字符串可以通过JSON.stringify()先转成字符串）
encodeURIComponent： 编码成ASCII字符序列
btoa: 编码为base64
然后： 进行解码-window.decodeURIComponent(atob(字符串))
decodeURIComponent： encodeURIComponent的解码函数
atob： btoa的解码函数
为什么需要两个编码跟解码：因为转换base64的btoa 以及 atob是不支持中文的，所以必须先将中文编码成ASCII字符才能顺利进行base64编码

2、文件上传-常见的图片Base64编码

var reader = new FileReader();
reader.readAsDataURL(文件);
FileReader自带了文件上传的参数，从input获取的文件可以直接通过readAsDataURL进行读取提交

3、canvas的图片Base64编码

如果只是单纯的想将图片路径转化为base64，那么canvas提供了一个函数toDataURL实现这个功能：
var canvas = document.getElementById(canvas对象);
base64路径= canvas.toDataURL();
已有图片路径编码：
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(图片路径, 0, 0);
canvas.toDataURL()
注意：canvas的这个图片如果跨域，那么canvas以及后端都要开启跨域

所有的Base64的编码后，j就算使用gzip压缩传递的数据大小也会增加，所以使用时需要确定数据库能否存入变大后的数据