Screenshot 屏幕截图

<!-- 导入需要的包 （一定要放到head标签里）-->
<script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

<el-button @click="handleOk"
                 type="primary"
                 icon="el-icon-camera"
                 >意见反馈</el-button>
  <el-dialog modal-append-to-body
            append-to-body
            title="意见反馈"
            top="50px"
            :visible.sync="box"
            width="60%">
  <el-input type="textarea"
            placeholder="请告诉我们遇到的问题或建议"
            v-model="form.text"></el-input>
     <br />
     <br />
  <div v-loading="flag"
        element-loading-text="正在截取屏幕数据">
    <img :src="form.img"
          width="100%" />
  </div>
  <span slot="footer" >
    <el-button type="primary"
                icon="el-icon-check"
                @click="handleSubmit">提 交</el-button>
  </span>
</el-dialog>
<script>
export default {
    data () {
      return {
        box: false,
        form: {
          img: '',
          text: ''
        }
      }
    },
    computed: {
      flag () {
        return this.validatenull(this.form.img);
      }
    },
    methods: {
      handleOk () {
        this.form = {
          img: '',
          text: ''
        }
        this.$Screenshot(document.querySelector("#app")).then(canvas => {
          this.form.img = canvas.toDataURL("image/jpeg", 0.8);
        });
        this.box = true;
      }
    }
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/fd4c815acc5742d697baa5db98db8c00.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)


![在这里插入图片描述](https://img-blog.csdnimg.cn/11b5db2bc5ef49a5b6267a72558abaed.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/77eee56784304e9ca5a8ac4f7ae387d8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)