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的一款好用的音乐插件