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
})
})
}
},`
本文来自博客园,作者:jialiangzai,转载请注明原文链接:https://www.cnblogs.com/zsnhweb/articles/16769473.html

浙公网安备 33010602011771号