前端canvas对象转成file对象

import html2canvas from 'html2canvas'

export default {
	methods: {
		//canvas对象转成file对象
		canvasToFile() {
            html2canvas(this.$parent.$refs['mapPanel'].$el,
                {
                    width: this.$parent.$refs['mapPanel'].$el.clientWidth - 600
                    // height:''
                }
            ).then(canvas => {
                const base64Data = canvas.toDataURL('image/png')
                const blob = this.base64ToBlob(base64Data)
                // 1000到10000的随机整数（四位数）
                let fileName = Math.floor((Math.random() * (10000 - 1000))) + 1000 
                fileName += '_'+this.form.markName + '.png'
                // 将Blob对象转换为File对象
                const file = new File([blob], fileName, { type: 'image/png' })
            })
        },
        // Base64字符串转换为二进制数据
        base64ToBlob(base64Data) {
            let byteString = base64Data
            if (base64Data.split(',')[0].indexOf('base64') >= 0) {
                byteString = atob(base64Data.split(',')[1]) // base64 解码
            } else {
                byteString = unescape(base64Data.split(',')[1])
            }
            // 获取文件类型
            const mimeString = base64Data.split(';')[0].split(':')[1] // mime类型

            // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
            // let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
            // let uintArr = new Uint8Array(arrayBuffer) // 创建视图

            const uintArr = new Uint8Array(byteString.length) // 创建视图

            for (let i = 0; i < byteString.length; i += 1) {
                uintArr[i] = byteString.charCodeAt(i)
            }
            // 生成blob
            const blob = new Blob([uintArr], {
                type: mimeString
            })
            // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
            return blob
        }
	}

}

详细内容：https://docs.pingcode.com/baike/2237480