记得设置！！！
WebGLParams: {
preserveDrawingBuffer: true
},
<button @click="getIdCarema('container')">点击</button>
// 导出图片
// base64转流
dataURLtoBlob(dataurl) {
console.log(444)
var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
},
downloadFile(url, name = 'What\'s the fuvk') {
console.log(555)
var a = document.createElement('a')
a.setAttribute('href', url)
a.setAttribute('download', name)
a.setAttribute('target', '_blank')
const clickEvent = document.createEvent('MouseEvents')
clickEvent.initEvent('click', true, true)
a.dispatchEvent(clickEvent)
},
downloadFileByBase64(base64, name) {
console.log(333)
var myBlob = this.dataURLtoBlob(base64)
var myUrl = URL.createObjectURL(myBlob)
this.downloadFile(myUrl, name)
// console.log(base64)
},
getIdCarema(id) {
console.log(111)
var element = document.getElementById(id)
html2canvas(element, {
backgroundColor: 'transparent',
logging: false
}).then(canvas => {
const context = canvas.getContext('2d')
// 关闭抗锯齿形
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
// canvas转化为图片
this.canvas2Image(canvas, canvas.width, canvas.height, id, '图片')
})
},
canvas2Image(canvas, width, height, id, val) {
console.log(222, canvas, width, height, id, val) // <canvas width="2312" height="1360" style="width: 1156px; height: 680px;"></canvas> 2312 1360 "container" "图片"
const retCanvas = document.createElement('canvas')
const retCtx = retCanvas.getContext('2d')
console.log('retCanvas', retCanvas)
retCanvas.width = width
retCanvas.height = height
retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height)
const img = document.createElement('img')
img.src = retCanvas.toDataURL('image/png') // 可以根据需要更改格式
// window.sessionStorage.setItem(id, retCanvas.toDataURL('image/png')) // ？
this.downloadFileByBase64(retCanvas.toDataURL('image/png'), val)
}
