前端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 = base64Dataif (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)}// 生成blobconst blob = new Blob([uintArr], {type: mimeString})// 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上return blob}}}

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