网页截图

[Lee981265]

import html2canvas from 'html2canvas'
console.log(this.getUrl(this.$refs.tzTable.$el))
getUrl(
    el: any,
    canvas: any = document.createElement('canvas'),
    option: any = {
      width: 500,
      height: 300,
      scale: 1,
      canvas,
      dpi: window.devicePixelRatio
    }
  ) {
    const context = canvas.getContext('2d')
    html2canvas(el, option).then(canvas => {
      context.mozImageSmoothingEnabled = false
      context.webkitImageSmoothingEnabled = false
      context.msImageSmoothingEnabled = false
      context.imageSmoothingEnabled = false
      let dataUrl = canvas.toDataURL('image/jpeg', 1.0)
      let newImg = document.createElement('img')
      newImg.src = dataUrl
      console.log('dataUrl:',dataUrl)
      // 输出在控制台
      console.log(
        '%c ',
        `background:url(${dataUrl}) no-repeat;background-size:200px; margin:5px 0;
  padding:0 0 162px 200px;
  border-radius:10px;
  overflow:hidden;`
      )
      newImg.width = option.width
      newImg.height = option.height
    })
  }