使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。
我的想法是转成上传文件的那种file格式。
方法如下：
/**
* @description: 将base64转换为文件对象
* @param {*} dataUrl base64
* @param {*} fileName 文件名
* @Date: 2021-06-30 14:33:47
* @Author: mulingyuer
*/
export function dataURLtoFile(dataUrl, fileName) {
const arr = dataUrl.split(";base64,"); //[data:image/png,xxx]
const mime = arr[0].replace("data:", ""); //mime后端识别用的文件格式数据
const fileType = mime.split("/").pop(); //获取文件格式
const bstr = atob(arr[1]); //base64解码
//创建Unicode编码的数组对象，每个值都是Unicode
const u8arr = new Uint8Array(bstr.split("").map(str => str.charCodeAt(0)));
return new File([u8arr], `${fileName ?? "file"}.${fileType}`, { type: mime });
}
步骤：
- 截取base64文本，已";base64,"为分割，可以拿到
[data:image/png,xxx]内容数据，下标0可以获取到文件mime信息，下标1则是base64内容 - 通过下标0获取到mime
- 通过mime获取到文件格式（文件名要用）
- 通过window下的atob方法对base64解码
- 创建一个Uint8Array数组，内容是解码出来后每一个字符的Unicode编码
- 创建File文件，第一个是数组，传入Uint8Array，第二个是文件名，第三个是配置信息，其中type设置mime信息。
除了new File你也可以创建blob 对象
把new File替换一下
new Blob([u8arr],{ type: mime });
完成。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。
