一、先将canvas绘制的图像通过toDataURL转为base64格式的数据
const canvas = document.getElementById('canvas-auth-box')
const ctx = canvas.getContext('2d')
// .... 此处省略 绘制过程
// 绘制完成后调用toDataURL得到base64格式的数据
const dataURL = canvas.toDataURL('image/png')
二、封装数据转化的函数
// dataURL 为base64数据 filename为文件名(必须带后缀名,如.jpg,.png)
dataURLtoFile(dataURL, filename) {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}
三、调用函数
// 接着在第一步的位置使用dataURLtoFile函数
const dataURL = canvas.toDataURL('image/png')
const name = 'home.png'
const file = this.dataURLtoFile(dataURL, name)
console.log(file, 'file')