Vue图片截图、缩放、OCR

<template>
  <div class="container-1">
    <el-row class="row-1">
      <el-col :span="4" class="col-1">
        <el-input placeholder="全文检索" suffix-icon="el-icon-search" />
      </el-col>
      <el-col :span="2" class="img-name">
        <span> 001.jpg </span>
      </el-col>
      <!--上一页-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-left.png" @click="before" />
      </el-col>

      <el-col :span="2" class="col-1 text-1">
        <el-input v-model="index" maxlength="2" @blur="blur">
          <span slot="suffix">
            /{{ src.length }}
          </span>
        </el-input>
      </el-col>
      <!--下一页-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-right.png" @click="afer" />
      </el-col>
      <!--放大-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-add.png" @click="changeScale(1)" />
      </el-col>
      <el-col :span="1" class="text-2 col-1">
        <span> {{ scale }}% </span>
      </el-col>
      <!--缩小-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-subtract.png" @click="changeScale(-1)" />
      </el-col>
      <!--截图-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-screenshots.png" @click="screenshot(0)" />
      </el-col>
      <!--OCR-->
      <el-col :span="1" class="col-1 icon-pinter">
        <img src="@/icons/doc/doc-ocr.png" @click="screenshot(1)" />
      </el-col>
    </el-row>
    <el-row class="row-2">
      <Cropper ref="Cropper" :img="src[index-1]" v-bind="$attrs" v-on="$listeners" @changeSize="changeSize" />
    </el-row>
    <div class="box1">
      <div v-for="(item) in ts" :key="item" @click="clickItem(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script >
import Cropper from '../../components/Cropper/index'
export default {
  name: 'Middle',
  components: {
    Cropper
  },
  data() {
    return {
      src: ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1685320185,1992788721&fm=26&gp=0.jpg',
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3958191757,3407482899&fm=26&gp=0.jpg'
      ],
      index: 1,
      scale: 100,
      input: '',
      ts: []
    }
  },
  mounted() {

  },
  methods: {
    afer() {
      if (this.index * 1 === this.src.length) this.index = 1
      else this.index++
    },
    before() {
      if (this.index * 1 === 1) this.index = this.src.length
      else this.index--
    },
    screenshot(e) {
      this.$refs.Cropper.screenshot(e)
    },
    changeScale(e) {
      this.$refs.Cropper.changeScale(e)
    },
    changeSize(e) {
      this.scale = e
    },
    blur() {
      if (this.ts.indexOf(this.index) < 0) {
        this.ts.unshift(this.index)
        if (this.ts.length > 10) this.ts.pop()
      }
    },
    clickItem(item, index) {
      this.index = item
    }
  }
}
</script >
<style lang="scss" scoped>
/deep/ .el-input{ width: 124px }
/deep/ .el-input--medium .el-input__inner{ height: 32px }
.container-1{padding: 20px}
//.row-1{box-shadow: #1C154C}
.row-2{ margin-top: 16px;padding: 0 82px}
.col-1{ margin-right: 15px }
.img-name{ line-height: 30px;width: 72px;height: 30px;margin-left: 25px;}
.text-1{
  line-height: 30px;background-color: #EFEFEF;width: 55px;height: 30px;text-align: center;
.el-input{
  width: 50px;
  display: flex;
  justify-content: center;
  /deep/  .el-input__inner{
    width: 20px;
    border: none;
    background: none;
    padding: 0;
    height: 30px;
  }
  /deep/ .el-input__suffix{
    position: initial;
    font-size: 16px;
  }
}
}
.text-2{ line-height: 30px;background-color: #EFEFEF;width: 48px;height: 30px;text-align: center }
.icon-pinter{ cursor:pointer }
.box1{
  position: absolute;
  top: 70px;
  right: 33px;
  div{
    background: #F0F2F5;
    width: 55px;
    height: 30px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 30px;
    cursor:pointer
  }
}
</style>

戳我下载JS文件

tip: 需注意引入文件路劲