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)//letwidth=realHtml.offsetWidth//dom//letheight=realHtml.offsetHeight//domletwidth=realHtml.offsetWidth//domletheight=realHtml.offsetHeight//domletscale=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 @   jialiangzai  阅读(17)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

喜欢请打赏

扫描二维码打赏

微信打赏

点击右上角即可分享
微信分享提示