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

Posted on by

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

一、安裝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"
  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(){        //取消
        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, // 裁剪框的大小信息
          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>

效果圖

總結

到此這篇關於Vue拖動截圖功能實現的文章就介紹到這瞭,更多相關Vue拖動截圖功能內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：