vue2使用html2canvas进行截图

跟上篇博客一样,下面代码直接放到vue2的任意页面截图就好,代码如下

// 我这里安装的html2canvas版本信息如下(自行下载插件)
"html2canvas": "^1.0.0-rc.4",

页面的代码如下(粘贴到vue2任意页面直接运行即可)

<template>
  <div class="coach_daily">
    <div class="coach_daily-inline">
      <!-- 这里是我设置的截图区域,在这里面写的所有代码都会被截图到 -->
      牛逼牛逼牛逼牛逼牛逼
    </div>

    <div style="position: absolute;z-index: 11;top:0;width: 100%;">
      <div class="coach_daily_share" v-show="showDrawBtn" @click="sharePic">
        生成图片
      </div>

      <div class="share_pic_mask" @click="clearPicture" v-show="painted_src || showPicDrawing"></div>
      <div @touchmove.prevent class="pic-modal flex-col-between" v-show="painted_src || showPicDrawing">
        <!-- <div class="pic flex-col-center"> -->
        <img v-show="!showPicDrawing" class="painted_src" ref="pic" :src="painted_src" alt="" />
        <div v-if="ispt" class="save-pic-btn-pt">
          <div v-if="isAndroid" class="save-pic-btn-pt" @click="saveInWebviewAnd">
            保存图片
          </div>

          <div v-if="!isAndroid" class="save-pic-btn-pt" @click="saveInWebview">
            保存图片
          </div>
        </div>
        <div v-if="!ispt" class="save-pic-btn">
          长按图片保存
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
window.shareImg = function () { }
window.getQueryVariable = function (variable) {
  var query = window.location.search.substring(1)
  var vars = query.split('&')
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=')
    if (pair[0] == variable) {
      return pair[1] || ''
    }
  }
  return ''
}
export default {
  data () {
    return {
      ispt: false, // 判断是否在app里打开
      isAndroid: false, //是否是安卓
      isNew: false, //是否是新版
      showDrawBtn: true,
      painted_src: '',
      showPicDrawing: false,
    }
  },
  mounted () {
    this.ispt = !!window.getQueryVariable('ispt')
    this.isNew = !!window.getQueryVariable('isNew')
    this.isAndroid = !!window.getQueryVariable('isAndroid')
  },

  methods: {
    sharePic () {
      this.leaderboardphb = false
      const that = this
      that.showDrawBtn = false
      window.shareImg()
      that.$nextTick(() => {
        setTimeout(() => {
          // .coach_daily-inline设置截图范围的容器,需要截图哪个容器的就获取哪个容器
          html2canvas(document.querySelector('.coach_daily-inline'), {
            useCORS: true, // 【重要】开启跨域配置
            allowTaint: false, //允许跨域图片
            scale: 2, //按比例增加分辨率 (2=双倍).
            dpi: window.devicePixelRatio * 2, //设备像素比
			height: document.querySelector('.coach_daily-inline').clientHeight - 3, //防止白边
          }).then((canvas) => {
            that.painted_src = canvas.toDataURL()
            that.$nextTick(() => {
              let pic = that.$refs.pic
              // pic.style.height = '72vh'
              that.showPicDrawing = false
            })
          })
          that.showPicDrawing = true
        }, 500)
      })
    },
    //安卓
    saveInWebviewAnd () {
      window.android.downPic(this.painted_src.split('base64,')[1])
      this.clearPicture()
    },
    // WEBVIEW调用保存图片
    saveInWebview () {
      if (this.isNew) {
        window.webkit.messageHandlers.saveImg.postMessage([
          this.painted_src.split('base64,')[1],
        ])
      } else {
        window.saveImg(this.painted_src.split('base64,')[1])
      }
      this.clearPicture()
    },
    // 清空图片
    clearPicture () {
      this.painted_src = ''
      this.showPicDrawing = false
      this.showDrawBtn = true
      this.leaderboardphb = true
    },
  },
}
</script>

<style scoped lang="less">
.coach_daily {
  width: 100vw;
  height: 100vh;
  // height: auto;
  position: relative;
  overflow: hidden;
}

.share_pic_mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.pic-modal {
  background: #fff;
  border-radius: 0.26rem;
  font-size: 0.28rem;
  color: #929191;
  position: fixed;
  top: 8vh;
  // left: 15vw;
  left: calc(50% - 37.5vw);
  z-index: 999;


  .pic {
    height: 76vh;
  }

  .save-pic-btn {
    height: 6vh;
    line-height: 6vh;
  }


  .painted_src {
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    width: 75vw;
    height: 7rem;
  }
}


.coach_daily_share {
  position: fixed;
  top: 1.128rem;
  right: 0;
  z-index: 999;
  padding: 0.13rem 0.26rem;
  backdrop-filter: blur(0.205rem);
  color: #333333;
  border-top-left-radius: 0.389rem;
  border-bottom-left-radius: 0.389rem;
  font-size: 0.23rem;
  cursor: pointer;
  border: 0.01rem solid rgba(255, 255, 255, 0.4);
}

.coach_daily-inline {
  width: 7.5rem;
  height: 10rem;
}
</style>

效果图