h5海报

html2canvas这个工具包
` //base64文件下载下载
base64DownloadFile (fileName, content) {
let aLink = document.createElement("a")
// console.log('content', content)
let newCont = content.toString()
let blob = this.base64ToBlob(newCont) //new Blob([content]);
// let evt = document.createEvent("HTMLEvents")
// // console.log("点击下载", evt)
// evt.initEvent("click", true, true) //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
// aLink.download = fileName
// aLink.href = URL.createObjectURL(blob)
// aLink.click()
document.body.appendChild(aLink)
aLink.style.display = 'none'
aLink.href = window.URL.createObjectURL(blob)
aLink.download = fileName
aLink.click()
// 释放资源
setTimeout(() => {
URL.revokeObjectURL(aLink.href)
}, 100)
},
//base64转blob
base64ToBlob (code) {
// console.log('code', code)
let parts = code.split(";base64,")
let contentType = parts[0].split("😊[1]
let raw = window.atob(parts[1])
let rawLength = raw.length

let uInt8Array = new Uint8Array(rawLength)

for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], { type: contentType })
},
// 封装的html2canvas
async encapDom () {
if (this.show) {
Toast.clear()
console.log(this.show)
Toast.loading({
mask: true,
duration: 0,
message: '生成中...'
})
let realHtml = this.\(refs.boxDom // console.log(realHtml, 'realHtml') // let width = realHtml.offsetWidth //获取dom 宽度 // let height = realHtml.offsetHeight //获取dom 高度 let width = realHtml.offsetWidth //获取dom 宽度 let height = realHtml.offsetHeight //获取dom 高度 let scale = 1 //放大倍数 // console.log('widthheightscale', width, height, scale) this.\)nextTick(() => {

html2canvas(realHtml, {
dpi: window.devicePixelRatio * 4,
scale: 1,
allowTaint: true, //是否允许跨域图像污染画布
useCORS: true, //是否尝试使用CORS从服务器加载图像
tainttest: true, //检测每张图片都已经加载完成
width: width, //画布的宽度
height: height //画布的高度
}).then((canvas) => {
// console.log('canvas', canvas)
this.$nextTick(() => {
this.imgList0.push(canvas.toDataURL('image/png'))
// this.imgList0 = canvas.toDataURL('image/png')
// console.log(this.imgList0)
// this.base64DownloadFile(new Date().getTime(), this.imgList0)
})
Toast.clear()
Toast.success('已成功')
// 下载到本地
this.isshowDom=false
this.isShowHaibao = true
})

})
}
},`

posted @ 2022-10-08 16:51  jialiangzai  阅读(26)  评论(0)    收藏  举报