使用Cropper来实现图片的裁剪

一、安装cropper

npm i Cropper -D;

二、引入使用

import Cropper from 'cropperjs

import 'cropperjs/dist/cropper.min.css'

三、封装组件SimpleCropper.vue

1、实现基本的样式；

<template>
<div class="v-simple-cropper">
  <slot>
    <button @click="upload">上传图片</button>
  </slot>
  <input class="file" ref="file" type="file" accept="image/*" @change="uploadChange" />
  <div class="v-cropper-layer" ref="layer">
    <img ref="cropperImg" />
    <div class="layer-header">
      <button class="cancel" @click="cancelHandle">取消</button>
      <button class="confirm" @click="confirmHandle">裁剪</button>
    </div>
  </div>
  <img width="100%" :src="imgsrc" />
</div>
</template>

2、事件及逻辑处理

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
  name: 'v-simple-cropper',
  props: {
    initParam: Object,
    successCallback: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      cropper: {},
      filename: '',
      imgsrc: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化裁剪插件
    init() {
      let cropperImg = this.$refs['cropperImg']
      this.cropper = new Cropper(cropperImg, {
        aspectRatio: 16 / 9,
        dragMode: 'move',
      })
    },
    // 点击上传按钮
    upload() {
      this.$refs['file'].click()
    },
    // 选择上传文件
    uploadChange(e) {
      let file = e.target.files[0]
      this.filename = file['name']
      let URL = window.URL || window.webkitURL || window.mozURL
      this.$refs['layer'].style.display = 'block'
      this.cropper.replace(URL.createObjectURL(file))
    },
    // 取消上传
    cancelHandle() {
      this.cropper.reset()
      this.$refs['layer'].style.display = 'none'
      this.$refs['file'].value = ''
    },
    // 确定上传
    confirmHandle() {
      let cropBox = this.cropper.getCropBoxData()
      let scale = this.initParam['scale'] || 1
      let cropCanvas = this.cropper.getCroppedCanvas({
        width: cropBox.width * scale,
        height: cropBox.height * scale,
      })
      let imgData = cropCanvas.toDataURL('image/jpeg')
      this.imgsrc = imgData
      console.log(imgData)
      let formData = new window.FormData()
      formData.append('fileType', this.initParam['fileType'])
      formData.append('img', imgData)
      //   formData.append('signId', this.$localStorage('signId'))
      formData.append('originalFilename', this.filename)
      this.cancelHandle()
      //   window
      //     .$axios(this.initParam['uploadURL'], formData, {
      //       method: 'post',
      //       headers: { 'Content-Type': 'multipart/form-data' },
      //     })
      //     .then((res) => {
      //       this.successCallback(res.data)
      //       this.cancelHandle()
      //     })
    },
  },
}
</script>

3、样式

<style lang="scss">
.v-simple-cropper {
  .file {
    display: none;
  }
  .v-cropper-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 99999;
    display: none;
    .layer-header {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 99999;
      background: #fff;
      width: 100%;
      height: 0.8rem;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    .cancel,
    .confirm {
      line-height: 0.8rem;
      font-size: 0.28rem;
      background: inherit;
      border: 0;
      outline: 0;
      float: left;
    }
    .confirm {
      float: right;
    }
    img {
      position: inherit !important;
      border-radius: inherit !important;
      float: inherit !important;
    }
  }
}
</style>

四、主组件引用index.vue

<simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" ref="cropper"> </simple-cropper>


import SimpleCropper from './SimpleCropper.vue'
@Component({ components: { SimpleCropper } })

export default class diy extends Vue {
  uploadParam = {
    fileType: 'recruit', // 其他上传参数
    uploadURL: '',
    scale: 4, // 相对手机屏幕放大的倍数: 4倍
  }
  }