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  阅读(20)  评论(0)    收藏  举报