canvas 转化base64 并上传

let canvas = document.getElementById('canvas');//创建canvas dom
let context = canvas.getContext('2d');// 返回一个2d画布
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);  // 创建一个红色框
 let base64 = canvas.toDataURL('image/png') // canvas转化成base64格式的图片
let bytes = window.atob(base64.split(',')[1])  // 对base64格式的图片进行解码
let ab = new ArrayBuffer(bytes.length) // 生成一个base64.length长度的内存区 ,它不能直接读写，只能通过视图
let ia = new Uint8Array(ab) // 创建一个指向ab的Uint8视图
for (var i = 0; i < bytes.length; i++) { // 把字节转换成unicode编码
      ia[i] = bytes.charCodeAt(i)
}
let fd = new FormData() 
fd.append('file', new Blob([ab], {type: 'image/png'}), 'avatar.png'); // 将二进制 转化成文件并上上传

ArrauBuffer参考资料