溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用Vue實(shí)現(xiàn)拖動(dòng)截圖功能

發(fā)布時(shí)間：2022-11-01 10:31:08 來源：億速云 閱讀：208 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了如何使用Vue實(shí)現(xiàn)拖動(dòng)截圖功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何使用Vue實(shí)現(xiàn)拖動(dòng)截圖功能文章都會(huì)有所收獲，下面我們一起來看看吧。

一、安裝html2canvas、vue-cropper

npm i html2canvas --save          //用于將指定區(qū)域轉(zhuǎn)為圖片
npm i vue-cropper -S             //將圖片進(jìn)行裁剪

二、在main.js注冊(cè)vue-cropper組件

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

三、頁面中引入html2canvas

  import html2canvas from "html2canvas"
  export default{
  }

四、代碼分解

1、將指定區(qū)域轉(zhuǎn)為圖片

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

這里是將body整個(gè)頁面轉(zhuǎn)為圖片，得到base64格式數(shù)據(jù)，其他區(qū)域直接獲取class或者id

2、將生成的圖片進(jìn)行拖動(dòng)截圖

<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"
	      
	    ></vueCropper>
	    <div class="btn_box">
	    	<div @click="save">確認(rèn)截圖</div>
	   	    <div @click="close">取消</div>
	    </div>
	 </div>
 </template>
<script>
 export default{
   data(){
       option: {
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
          outputType: "jpeg", // 裁剪生成圖片的格式
          canScale: false, // 圖片是否允許滾輪縮放
          autoCrop: false, // 是否默認(rèn)生成截圖框
          fixedBox: false, // 固定截圖框大小 不允許改變
          fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
          fixedNumber: [7, 5], // 截圖框的寬高比例
          full: true, // 是否輸出原圖比例的截圖
          canMove: false, //時(shí)候可以移動(dòng)原圖
          canMoveBox: true, // 截圖框能否拖動(dòng)
          original: false, // 上傳圖片按照原始比例渲染
          centerBox: false, // 截圖框是否被限制在圖片里面
          infoTrue: true // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?
        },
        uploadImg:"",
        show: false
   },
   methods:{
     enter() {
       if (this.uploadImg == "") {
         return;
       }
       this.$refs.cropper.startCrop(); //開始裁剪
     },
     leave() {
       this.$refs.cropper.stopCrop();//停止裁剪
     },
     save() {        //確認(rèn)截圖
        this.$refs.cropper.getCropData((data) => {      //獲取截圖的base64格式數(shù)據(jù)
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //獲取截圖的Blob格式數(shù)據(jù)
        //   this.cutImg = data;
        // });
      },
      close(){        //取消
        this.show = false
      }
   }
 }
 </script>

五、全部代碼

<template>
   <div>
     <div @click="tailoring">裁剪</div>
	<!--繼續(xù)寫頁面的其他內(nèi)容 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"
	      
	    ></vueCropper>
	    <div class="btn_box">
	    	<div @click="save">確認(rèn)截圖</div>
	   	    <div @click="close">取消</div>
	    </div>
	 </div>
   </div>
</template>
<script>
import html2canvas from "html2canvas"
 export default{
  data(){
   return{
     option: {
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
          outputType: "jpeg", // 裁剪生成圖片的格式
          canScale: false, // 圖片是否允許滾輪縮放
          autoCrop: false, // 是否默認(rèn)生成截圖框
          fixedBox: false, // 固定截圖框大小 不允許改變
          fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
          fixedNumber: [7, 5], // 截圖框的寬高比例
          full: true, // 是否輸出原圖比例的截圖
          canMove: false, //時(shí)候可以移動(dòng)原圖
          canMoveBox: true, // 截圖框能否拖動(dòng)
          original: false, // 上傳圖片按照原始比例渲染
          centerBox: false, // 截圖框是否被限制在圖片里面
          infoTrue: true // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?
        },
        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() {        //確認(rèn)截圖
        this.$refs.cropper.getCropData((data) => {      //獲取截圖的base64格式數(shù)據(jù)
          console.log(data)
          this.show = false
        })
        // this.$refs.cropper.getCropBlob(data => { //獲取截圖的Blob格式數(shù)據(jù)
        //   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的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

關(guān)于“如何使用Vue實(shí)現(xiàn)拖動(dòng)截圖功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何使用Vue實(shí)現(xiàn)拖動(dòng)截圖功能”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手