如何使用vue实现前端截图功能

一、安装html2canvas、vue-cropper

npm i html2canvas --save //用于将指定区域转为图片
npm i vue-cropper -S //将图片进行裁剪

二、在main.js注册vue-cropper组件

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

三、页面中引入html2canvas

import html2canvas from "html2canvas"

四、

<template>
   <div>
     <div @click="tailoring">裁剪</div>
    <!--继续写页面的其他内容 pop_alert可封装成组件使用-->
    
     <div class="pop_alert" v-if="show">
       <vueCropper
          @mouseenter.native="enter"
          @mouseleave.native="leave"
          ref="cropper"
          :img="uploadImg"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          style="background-image:none"
        ></vueCropper>
        <div class="btn_box">
            <div @click="save">确认截图</div>
               <div @click="close">取消</div>
        </div>
     </div>
   </div>
</template>
<script>
import html2canvas from "html2canvas"
 export default{
  data(){
   return{
     option: {
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: "jpeg", // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: false, // 是否默认生成截图框
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: false, // 是否开启截图框宽高固定比例
          fixedNumber: [7, 5], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMove: false, //时候可以移动原图
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        uploadImg:"",
        show: false
   }
  },
  methods:{
    tailoring(){            //裁剪
      this.$nextTick(()=>{
           html2canvas(document.body,{}).then(canvas => {
             let dataURL = canvas.toDataURL("image/png");
             this.uploadImg = dataURL
             this.show = true
           });
       })
    },
    enter() {
       if (this.uploadImg == "") {
         return;
       }
       this.$refs.cropper.startCrop(); //开始裁剪
     },
     leave() {
       this.$refs.cropper.stopCrop();//停止裁剪
     },
     save() {        //确认截图
        this.$refs.cropper.getCropData((data) => {      //获取截图的base64格式数据
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
        //   this.cutImg = data;
        // });
      },
      close(){        //取消
        this.show = false
      }
   }
 }
</script>
<style>
    .pop_alert{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px dashed red;
      background-color: #000000;
    }
    .btn_box{
        position: absolute;
        top: 0;
        color: red;
        right: 0;
        font-size: 30px;
        display: flex;
        align-items: center;
        z-index: 6666;
    }
</style>

五、在页面使用pdf.js浏览文件时的截图

思路：获取当前页码，将当前页作为一个画布进行截图

const iframeBox = document.getElementById("iframeId").contentWindow; //根据iframe的id找到当前窗口
var currentpage = 1; //当前页码
const iputarrays = iframBox.docunment.getElementsByTagName("input"); // pdf的viewer中当前页码是一个id为pageNumber的input输入框
for(var i = 0;i<inputarrays.length;i++){
  if(inputarrays[i].id == "pageNumber"){
    currentpage = inputarrays[i].value;
  }   
}
const canvasBox = iframeBox.document.getElementById("pageContainer" + curentpage); // 第n页的id为pageContainer + n
const canvas = document.createElement("canvas"); //创建画布
this.$nextTick(()=>{
   html2canvas(canvasBox,{}).then(canvas => {
      let dataURL = canvas.toDataURL("image/png");
      this.uploadImg = dataURL
      this.show = true
     });
})