vue-cropper一款好用的前端截圖插件

本文轉載自查看原文 2020-04-14 13:54 7814 vue前端截圖

項目介紹：使用vue+elementUI寫的項目，需要用到圖片截圖功能、視頻截圖、視頻直播等功能，關於截圖不失真，在網上查了不少資料，嘗試了一些方法，最后發現vue-cropper這款插件能滿足需求，可以讓用戶自由調整截圖框的寬高、位置，可以根據用戶的需求選擇截圖的格式（png、jpg），也可以選擇圖片的編碼格式（base64、blob）等，在這里記錄一下，有興趣的猿友可以按照步驟操作一下，如果用着還行，請您留下一個贊，下面貼出詳細步驟和代碼：

步驟：

一、項目中引入vue-cropper插件：

　1、用命令：npm install vue-cropper --save 或者 npm install vue-cropper -S，

　2、全局引入：

　　　在main.js中引入　　　　　　

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

或者　　　

import VueCropper from 'vue-cropper'

Vue.prototyep.VueCropper = VueCropper

按需引入：

　在要使用的vue文件中引入

import VueCropper from 'vue-cropper'

　　二、新建一個vue文件ScreenShotDemo作為截圖組件，把代碼拷貝進去

　　　　html部分：

  1 <template>
  2   <div id="app">
  3     <div class="model" v-show="model" @click="model = false">
  4       <div class="model-show">
  5         <img :src="modelSrc" alt="">
  6       </div>
  7     </div>
  8     <p style="color: #000;">截圖demo</p>
  9     <div class="cut">
 10       <vue-cropper
 11         ref="cropper"
 12         :img="option.img"
 13         :output-size="option.size"
 14         :output-type="option.outputType"
 15         :info="true"
 16         :full="option.full"
 17         :fixed="fixed"
 18         :fixed-number="fixedNumber"
 19         :can-move="option.canMove"
 20         :can-move-box="option.canMoveBox"
 21         :fixed-box="option.fixedBox"
 22         :original="option.original"
 23         :auto-crop="option.autoCrop"
 24         :auto-crop-width="option.autoCropWidth"
 25         :auto-crop-height="option.autoCropHeight"
 26         :center-box="option.centerBox"
 27         @real-time="realTime"
 28         :high="option.high"
 29         @img-load="imgLoad"
 30         mode="cover">
 31       </vue-cropper>
 32       <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
 33         <div :style="previews.div">
 34           <img :src="previews.url" :style="previews.img">
 35         </div>
 36       </div>
 37     </div>
 38     <div class="test-button">
 39       <button @click="changeImg" class="btn">changeImg</button>
 40       <label class="btn" for="uploads">upload</label>
 41       <input
 42         type="file"
 43         id="uploads"
 44         style="position:absolute; clip:rect(0 0 0 0);"
 45         accept="image/png, image/jpeg, image/gif, image/jpg"
 46         @change="uploadImg($event, 1)"
 47       >
 48       <button @click="startCrop" v-if="!crap" class="btn">開始</button>
 49       <button @click="stopCrop" v-else class="btn">結束</button>
 50       <button @click="clearCrop" class="btn">清空</button>
 51       <button @click="refreshCrop" class="btn">刷新</button>
 52       <button @click="changeScale(1)" class="btn">放大</button>
 53       <button @click="changeScale(-1)" class="btn">縮小</button>
 54       <button @click="rotateLeft" class="btn">向右旋轉90</button>
 55       <button @click="rotateRight" class="btn">向左旋轉90</button>
 56       <button @click="finish('base64')" class="btn">預覽(base64)</button>
 57       <button @click="finish('blob')" class="btn">預覽(blob)</button>
 58       <a @click="down('base64')" class="btn">下載(base64)</a>
 59       <a @click="down('blob')" class="btn">下載(blob)</a>
 60       <div style="display:block; width: 100%;color: #000;">
 61         <label class="c-item">
 62           <span>上傳圖片是否顯示原始寬高 (針對大圖 可以鋪滿)</span>
 63           <input type="checkbox" v-model="option.original">
 64           <span>original: {{ option.original}}</span>
 65         </label>
 66         <label class="c-item">
 67           <span>能否拖動圖片</span>
 68           <input type="checkbox" v-model="option.canMove">
 69         </label>
 70         <label class="c-item">
 71           <span>能否拖動截圖框</span>
 72           <input type="checkbox" v-model="option.canMoveBox">
 73           <span>canMoveBox: {{ option.canMoveBox}}</span>
 74         </label>
 75         <label class="c-item">
 76           <span>截圖框固定大小</span>
 77           <input type="checkbox" v-model="option.fixedBox">
 78           <span>fixedBox: {{ option.fixedBox}}</span>
 79         </label>
 80         <label class="c-item">
 81           <span>是否輸出原圖比例的截圖</span>
 82           <input type="checkbox" v-model="option.full">
 83           <span>full: {{ option.full}}</span>
 84         </label>
 85         <label class="c-item">
 86           <span>是否自動生成截圖框</span>
 87           <input type="checkbox" v-model="option.autoCrop">
 88           <span>autoCrop: {{ option.autoCrop}}</span>
 89         </label>
 90         <label class="c-item">
 91           <span>是否根據dpr生成適合屏幕的高清圖片</span>
 92           <input type="checkbox" v-model="option.high">
 93           <span>high: {{ option.high}}</span>
 94         </label>
 95         <label class="c-item">
 96           <span>截圖框是否限制在圖片里(只有在自動生成截圖框時才能生效)</span>
 97           <input type="checkbox" v-model="option.centerBox">
 98           <span>centerBox: {{ option.centerBox}}</span>
 99         </label>
100         <label class="c-item">
101           <p>輸出圖片格式</p>
102           <label>jpg
103             <input type="radio" name="type" value="jpeg" v-model="option.outputType">
104           </label>
105           <label>png
106             <input type="radio" name="type" value="png" v-model="option.outputType">
107           </label>
108           <label>webp
109             <input type="radio" name="type" value="webp" v-model="option.outputType">
110           </label>
111         </label>
112       </div>
113     </div>
114   </div>
115 </template>

　　js部分：

<script>
import { VueCropper } from 'vue-cropper'
export default {
  name: 'ScreenShotDemo',
  components: {
    VueCropper
  },
  data() {
    return {
      model: false,
      modelSrc: '',
      crap: false,
      previews: {},
      lists: [
        {
          img: 'https://qn-qn-kibey-static-cdn.app-echo.com/goodboy-weixin.PNG'
        },
        {
          img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4'
        }
      ],
      option: {
        // 裁剪圖片的地址
        img: 'https://qn-qn-kibey-static-cdn.app-echo.com/goodboy-weixin.PNG',
        // 裁剪生成圖片的質量
        size: 1,
        // 輸出原圖比例截圖 props名full
        full: false,
        // 裁剪生成圖片的格式
        outputType: 'png',
        // 上傳圖片是否可以移動
        canMove: true,
        // 固定截圖框大小 不允許改變
        fixedBox: false,
        // 上傳圖片按照原始比例渲染
        original: false,
        // 截圖框能否拖動
        canMoveBox: true,
        // 是否默認生成截圖框
        autoCrop: false,
        // 只有自動截圖開啟 寬度高度才生效
        // 默認生成截圖框寬度
        autoCropWidth: 200,
        // 默認生成截圖框高度
        autoCropHeight: 150,
        // 截圖框是否被限制在圖片里面
        centerBox: false,
        // 是否按照設備的dpr 輸出等比例圖片
        high: true
      },
      show: true,
      // 是否開啟截圖框寬高固定比例
      fixed: false,
      // 截圖框的寬高比例
      fixedNumber: [1, 2],
      // 裁剪框的大小信息
      info: true,
      // canScale 圖片是否允許滾輪縮放
      canScale: true,
      // infoTrue  true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高:
      infoTrue: true,
      // maxImgSize  限制圖片最大寬度和高度
      maxImgSize: 2000,
      // enlarge 圖片根據截圖框輸出比例倍數
      enlarge: 1,
      // mode  圖片默認渲染方式
      mode: 'contain'
    }
  },
  methods: {
    /**
     * 內置方法 通過this.$refs.cropper 調用
     this.$refs.cropper.startCrop() 開始截圖
     this.$refs.cropper.stopCrop() 停止截圖
     this.$refs.cropper.clearCrop() 清除截圖
     this.$refs.cropper.changeScale() 修改圖片大小 正數為變大 負數變小
     this.$refs.cropper.getImgAxis() 獲取圖片基於容器的坐標點
     this.$refs.cropper.getCropAxis() 獲取截圖框基於容器的坐標點
     this.$refs.cropper.goAutoCrop 自動生成截圖框函數
     this.$refs.cropper.rotateRight() 向右邊旋轉90度
     this.$refs.cropper.rotateLeft() 向左邊旋轉90度
     圖片加載的回調 imgLoad 返回結果success, error
     獲取截圖信息
     this.$refs.cropper.cropW 截圖框寬度
     this.$refs.cropper.cropH 截圖框高度
     */
    changeImg() {
      this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
    },
    startCrop() {
      // start
      this.crap = true
      this.$refs.cropper.startCrop()
    },
    stopCrop() {
      //  stop
      this.crap = false
      this.$refs.cropper.stopCrop()
    },
    clearCrop() {
      // clear
      this.$refs.cropper.clearCrop()
    },
    refreshCrop() {
      // clear
      this.$refs.cropper.refresh()
    },
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    finish(type) {
      // 輸出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '圖片生成中..'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          console.log(data)
          var img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    // 實時預覽函數
    realTime(data) {
      this.previews = data
      this.$emit('', this.previews)
      console.log(data)
    },

    finish2(type) {
      this.$refs.cropper2.getCropData((data) => {
        this.model = true
        this.modelSrc = data
      })
    },
    finish3(type) {
      this.$refs.cropper3.getCropData((data) => {
        this.model = true
        this.modelSrc = data
      })
    },
    down(type) {
      // event.preventDefault()
      var aLink = document.createElement('a')
      aLink.download = 'demo'
      // 輸出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
    },
    uploadImg(e, num) {
      // 上傳圖片
      // this.option.img
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('圖片類型必須是.gif,jpeg,jpg,png,bmp中的一種')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer轉化為blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.option.img = data
        } else if (num === 2) {
          this.example2.img = data
        }
      }
      // 轉化為base64
      // reader.readAsDataURL(file)
      // 轉化為blob
      reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {
      console.log(msg)
    }
  }
}
</script>

　　css部分：

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .cut {
    width: 500px;
    height: 500px;
    margin: 30px auto;
  }
  .c-item {
    max-width: 800px;
    margin: 10px auto;
    margin-top: 20px;
  }
  .content {
    margin: auto;
    max-width: 1200px;
    margin-bottom: 100px;
  }
  .test-button {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }
  .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin:20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
  }
  .des {
    line-height: 30px;
  }
  code.language-html {
    padding: 10px 20px;
    margin: 10px 0px;
    display: block;
    background-color: #333;
    color: #fff;
    overflow-x: auto;
    font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
    border-radius: 5px;
    white-space: pre;
  }
  .show-info {
    margin-bottom: 50px;
  }
  .show-info h2 {
    line-height: 50px;
  }
  .title {
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    margin: 20px 0px;
    background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
    color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    animation: slide 5s infinite linear;
    font-size: 40px;
  }
  .test {
    height: 500px;
  }
  .model {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
  }
  .model-show {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  .model img {
    display: block;
    margin: auto;
    max-width: 80%;
    user-select: none;
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
  }
  .c-item {
    display: block;
    user-select: none;
  }
  @keyframes slide {
    0%  {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
</style>

三、說明：

　　1、修改圖片就修改option.img的路徑

　　2、this.$refs.cropper.startCrop()開始截圖

　　3、this.$refs.cropper.stopCrop() 停止截圖

　　4、this.$refs.cropper.changeScale() 修改圖片大小 正數為變大 負數變小

　　5、this.$refs.cropper.getImgAxis() 獲取圖片基於容器的坐標點
　　6、this.$refs.cropper.getCropAxis() 獲取截圖框基於容器的坐標點

　　7、this.$refs.cropper.goAutoCrop 自動生成截圖框函數

　　8、this.$refs.cropper.rotateRight() 向右邊旋轉90度

　　9、this.$refs.cropper.rotateLeft() 向左邊旋轉90度

　　10、realTime實時預覽函數

　　11、獲取二進制流數據
　　this.$refs.cropper.getCropBlob((data) => {
  　　data 為二進制流數據
　　})

 　12、獲取base64數據
　　this.$refs.cropper.getCropData((data) => {
 　　 data為base64數據
　　})
　　13、uploadImg(e, num)
　　　　上傳函數，其中;
　　　　// 轉化為base64
　　　　reader.readAsDataURL(file)
　　　　// 轉化為blob
　　　　reader.readAsArrayBuffer(file)

四、調用組件

在使用到截圖的vue文件中引入該組件，假設為同級目錄，
引入組件：

import ScreenShot from 'screen-shot-demo'

注冊組件：

　components: {
 　　ScreenShot
　}

調用：

 <screen-shot v-if="centerDialogVisible" :img-url="bigPicUrl"  :img-arr="picArrUrl" />

說明：

其中：img-url為要截圖的圖片url, picArrUrl為可供選擇的所有圖源，因為我這里還實現了上一張、下一張的切換圖片的功能，這里就不介紹了。

坑：

 v-if=“”這個是在走了一些坑才加上的,描述一下我遇到的問題：

我這里的截圖是放在里el-dialog里面，選中記錄后點擊截圖功能，打開截圖對話框，第一次會正常顯示圖片的大小，也可以正常截圖，關閉對話框，另選一條記錄，再次點擊截圖時，此時的圖片大小是不正常的，會在截圖區域的左上角，使用截圖功能時，頁面會報錯，截圖也不成功，
去github上搜了一下，嘗試了幾種直接銷毀vue-cropper實例的方法，均不成功，但是第一次進入頁面，第一次點擊截圖功能，是可以的，於是就想着點擊截圖按鈕，就初始化截圖插件，最后想到了使用v-if，試了一下，成功了

總結：從查資料，到運用到項目中，花了2天左右的時間，其中實現了，左箭頭（上一張）、右箭頭（下一張）切換圖源，第一張、最后一張的提示，截圖功能的實現，截圖預覽功能的實現，截圖下載、上傳功能的實現等，
　　 功能不算多，主要是實現過程中走了一些彎路，所以在這里分享出來，供廣大猿友選擇嘗試，若在開發過程中遇到了bug，歡迎與我進行交流，郵箱：m18578799897@163.com

前人栽樹，后人乘涼

參考資料：
　　　　　　https://www.npmjs.com/package/vue-cropper/v/0.4.7
　　　　　　https://blog.csdn.net/qq_30632003/article/details/79639346　 
　　　　　　https://github.com/xyxiao001/vuecropper/blob/master/english.md
　　　　　　https://www.cnblogs.com/tugenhua0707/p/8859291.html
　　　　　　https://github.com/xyxiao001/vue-cropper

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue-cropper 一款很好用的前端公、農歷轉換插件 gitlens一款好用的vscode插件一款好用的jquery評分插件 storejs一款好用的本地存儲插件 VUE 圖片上傳/剪切(vue-cropper) 一款超好用的第三方評論插件--Gitalk 推薦一款很好用的調試js的eclipse插件挖到一款免費好用的web報表插件 WP-player——WordPress的一款好用的音樂插件