使用vue20--element-ui-与vue-cropper-实现一个图片裁剪功能

1. 安装依赖

npm install element-ui vue-cropper -S

2. 引入依赖

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueCropper from 'vue-cropper'

Vue.use(ElementUI)
Vue.component(VueCropper)

3. 编写模板

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <vue-cropper
      ref="cropper"
      v-model="image"
      :drag-mode="dragMode"
      :view-mode="viewMode"
      :auto-crop="autoCrop"
      :center="center"
      :zoom-on-wheel="zoomOnWheel"
      :src="imageUrl"
      :guides="guides"
      :background="background"
      :responsive="responsive"
      :scalable="scalable"
      :rotatable="rotatable"
      :crop-box-movable="cropBoxMovable"
      :crop-box-resizable="cropBoxResizable"
      :toggle-drag-mode-on-dblclick="toggleDragModeOnDblclick"
      :min-container-width="minContainerWidth"
      :min-container-height="minContainerHeight"
      :min-crop-box-width="minCropBoxWidth"
      :min-crop-box-height="minCropBoxHeight"
      :max-crop-box-width="maxCropBoxWidth"
      :max-crop-box-height="maxCropBoxHeight"
      :check-cross-origin="checkCrossOrigin"
      :check-image-origin="checkImageOrigin"
      :crop="crop"
      :move="move"
      :zoom="zoom"
      @ready="onReady"
      @cropstart="onCropstart"
      @cropmove="onCropmove"
      @cropend="onCropend"
      @crop="onCrop"
      @zoom="onZoom"
      @move="onMove"
    ></vue-cropper>
    <el-button type="primary" @click="cropImage">裁剪图片</el-button>
  </div>
</template>

4. 编写脚本

<script>
export default {
  data() {
    return {
      image: null,
      imageUrl: '',
      uploadUrl: '',
      dragMode: 'crop',
      viewMode: 1,
      autoCrop: true,
      center: true,
      zoomOnWheel: true,
      guides: true,
      background: true,
      responsive: true,
      scalable: true,
      rotatable: true,
      cropBoxMovable: true,
      cropBoxResizable: true,
      toggleDragModeOnDblclick: true,
      minContainerWidth: 400,
      minContainerHeight: 400,
      minCropBoxWidth: 100,
      minCropBoxHeight: 100,
      maxCropBoxWidth: 500,
      maxCropBoxHeight: 500,
      checkCrossOrigin: true,
      checkImageOrigin: true,
      crop: null,
      move: null,
      zoom: null
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleSuccess(response) {
      this.imageUrl = response.data.url
    },
    handleError(error) {
      this.$message.error('上传图片失败!')
    },
    onReady() {
      console.log('onReady')
    },
    onCropstart() {
      console.log('onCropstart')
    },
    onCropmove() {
      console.log('onCropmove')
    },
    onCropend() {
      console.log('onCropend')
    },
    onCrop() {
      console.log('onCrop')
    },
    onZoom() {
      console.log('onZoom')
    },
    onMove() {
      console.log('onMove')
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        // 使用formData上传裁剪后的图片
        const formData = new FormData()
        formData.append('file', blob, 'avatar.jpg')
        this.$http.post('/api/upload', formData).then((response) => {
          this.$message.success('上传成功')
        }).catch((error) => {
          this.$message.error('上传失败')
        })
      })
    }
  }
}
</script>