vue H5页面长截图

如果你想要将整个页面转换为图片，通常需要使用到 html2canvas库，它可以将整个页面渲染为canvas元素，然后转换为图片。但是这通常会导致图片文件大小较大，并且可能不会包括页面中的某些内容，因为html2canvas渲染的是页面的布局，而不是内容。

安装  npm install html2canvas

<template>
	<div>
      <div class="page" id="content" ref="content">
        <div class="title">截图的内容</div>
      </div>
      <button class="btn-box" @click="onClick">截图</button>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'

  export default {
    data() {
      return {
        imgUrl : ""
      }
    },
    methods: {
     //关于高度的scrollHeight、clientHeight区别
      //https://cloud.tencent.com/developer/article/2107920
      onClick() {
       setTimeout(() => {
                html2canvas(document.getElementById('content'), {
                    allowTaint: true,//是否跨域图像污染画布
                    useCORS: true,
                    backgroundColor: '#fff',
                    scale: 2,
                    dpi: 500,
                    width: document.getElementById('content').clientWidth,
                    height: document.getElementById('content').scrollHeight, //scrollHeight 
                    scrollX: 0,
                    scrollY: 0,
                }).then(canvas => {
                    this.imgUrl = canvas.toDataURL('image/png');
                    //上传文件
                    // this.uploadB64(this.imgUrl)
                });
            })
      },
    },
  }
</script>
<style>
.page {
        width: 100%;
        height: auto;
        padding: 0.3rem;
        overflow: auto;
        position: relative;
        background: linear-gradient(180deg, #3673f5 0%, #6aabff 100%);
}
.title {
  text-align: center;
  margin: 20px 0 10px 0;
  font-size: 13px;
}
.des {
  background-color: #3f61c94f;
  padding: 6px 0px;
  margin: 10px 0;
}
.btn-box {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #224799;
  border: none;
  margin-top: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>