Vue拖動截圖功能的簡單實現方法

阿新 • • 發佈：2021-07-11

拖動滑鼠進行頁面截圖(也可指定區域拖動截圖)

一、安裝html2canvas、-cropper

npm i html2canvas --save          //用於將指定區域轉為圖片
npm i vue-cropper -S             //將圖片進行裁剪

二、在main.註冊http://www.cppcns.comvue-cropper元件

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

三、頁面中引入html2canvas

  import html2canvas from "html2canvas"
  export default{
  }

四、程式碼分解

1、將指定區域轉為圖片

this.$nextTick(()=>{
   html2canvas(document.body,{}).then(canvas => {    
     let dataURL = canvas.toDataURL("image/png");
     this.uploadImg = dataURL
     this.loading = true
   });
 })

這裡是將body整個頁面轉為圖片，得到base64格式資料，其他區域直接獲取class或者id

2、將生成的圖片進行拖動截圖

<template>
	<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>
 </template>
<script>
 export default{
   data(){
       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:{
     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(){        //取消
   http://www.cppcns.com 
     this.show = false
      }
   }
 }
 </script>

五、全部程式碼

<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,shwww.cppcns.comow: 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(); //開始裁剪
     },save() {        //確認截圖
        this.$refs.cropper.getCropData((data) => {      //獲取截圖的base64格式資料
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //獲取截圖的Blob格式資料
        //   this.cutImg = data;
        // });
http://www.cppcns.com      },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>