html2canvas实现自动截屏html

傷城~ 2023-07-05 05:23 73阅读 0赞

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;
        }
      }

注：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 })
        },

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200430155002579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70