guci-date/canvas2d.js

A golden bottle of sake costs ten thousand yuan, and a jade plate costs ten thousand yuan.

/**
 *@string 
 * **/

import { Loading } from 'element-ui';

const captureCanvas = (elemnt) =>{

  this.showBtns = false

  const loadingObj =  Loading.service({ lock: true,  text: '下载中请稍等...',  spinner: 'el-icon-loading',  background: 'rgba(0, 0, 0, 0.6)'})     

  const canvas2d = document.getElementById(elemnt)
  const scrollHeight = this.titleis === '（咨询单）家庭教育一站式落地陪跑' ? 5500 : 3000
  const scrollWidth = 500

  const fullCanvas = document.createElement('canvas')
  fullCanvas.width = scrollWidth
  fullCanvas.height = scrollHeight
  const fullCtx = fullCanvas.getContext('2d')


  for (let y = 0; y < scrollHeight; y += fullCanvas.height) {
      for (let x = 0; x < scrollWidth; x += fullCanvas.width) {
        html2canvas(canvas2d, {
          scrollX: x,
          scrollY: y,
          width: fullCanvas.width,
          height: fullCanvas.height,
          useCORS: true
        }).then((canvas) => {
          fullCtx.drawImage(canvas, x, y)
        })
      }
  }

  setTimeout(() => {
    let imgData = fullCanvas.toDataURL('image/jpg')
    let link = document.createElement('a')
    link.href = imgData
    link.download = this.titleis + '.jpg'
    link.click()
    fullCanvas.remove()
    loadingObj.close()
    return true
  }, 3000)
  
}

export default {
  captureCanvas
}