html2canvas实现自动截屏html

html2canvas官网：http://html2canvas.hertzen.com/

一、下载：

npm install html2canvas  --save

二、项目页面中引入：

import html2canvas from 'html2canvas'

components: {
  html2canvas
},

三、将你需要截取的部分用 id 包裹起来，截的就是改区域：

//触发截屏事件
<div @click="handleOk">
   <img style="width: 60px;margin-bottom: 15px" src="@/assets/img/knowledge/feedback.png">
</div>

//id包裹需要截屏的部位
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

//弹窗为了显示出截屏图片
<el-dialog modal-append-to-body
               append-to-body
               title="问题反馈"
               top="50px"
               :visible.sync="problemDialog"
               width="60%">
      <div>更多建议</div>
      <el-input type="textarea"
                style="margin: 20px 0;"
                placeholder="请输入内容"
                v-model="form.text"></el-input>
      <el-checkbox v-model="checked">同时提交文章内容的截图并标记</el-checkbox>
      <div v-loading="flag"
           element-loading-text="正在截取屏幕数据"
           class="screenshot__img">
        <img :src="form.img"
             width="100%" />
      </div>
      <div slot="footer"
           style="text-align: center">
        <el-button type="primary"
                   icon="el-icon-check"
                   @click="handleSubmit">提 交</el-button>
      </div>
    </el-dialog>

data() {
    return {
      form: {
        img: '',
        text: ''
      },
      problemDialog:false,
    }
  }
  
computed: {
    flag () {
      return this.validatenull(this.form.img);
    }
  },

methods: {
    handleSubmit() {
      this.problemDialog = false;
      this.$message.success('反馈提交成功')
    },
    handleOk() {
      this.form = {
        img: '',
        text: ''
      }
      html2canvas(document.querySelector("#capture")).then(canvas => {
        this.form.img = canvas.toDataURL("png"); // 获取生成的图片的url
        // console.log(this.form.img)
      })
      this.problemDialog = true;
    }
  }

<style scoped>
.screenshot {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 2048;
  }
</style>

注：id区域可自行修改。

后来有需求将截屏要上传服务保存后台，截屏得到的是base64，故：

截屏产生的base64转file文件，并上传服务

handleSubmit () {
      console.log(this.form.img, '截屏后的base64')
      this.imgGs = this.form.img.split(';')[0].split('/')[1]
      var file = this.dataURLtoBlob(this.form.img, '33333.' + this.imgGs)
      var formData = new FormData()
      formData.append('file', file)
      this.axios.post('/admin/sys-file/upload', formData).then((response) => {
        this.form.wjmc = response.data.data.bucketName + '-' + response.data.data.fileName
        problemFeedback(this.form).then(res=>{
          if(res.data.code==0){
            this.problemDialog = false;
            this.$message.success('反馈提交成功')
          }
        })
      })
    },
    
//将base64转换为file文件
 dataURLtoBlob: function(dataurl, name) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], name, { type: mime })
    },