elementui cropperjs

以下是关于在 Element UI 项目中集成 Cropper.js 的解决方案，内容涵盖安装、基础配置和常见问题处理：

安装依赖

确保项目已安装 Element UI 和 Cropper.js 核心库：

npm install cropperjs --save
npm install element-ui --save

基础组件封装

创建独立的图片裁剪组件（如 ImageCropper.vue），包含以下核心结构：

<template>
  <el-dialog :visible.sync="visible" title="图片裁剪">
    <div class="cropper-container">
      <img ref="image" :src="imgSrc" alt="裁剪图片">
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="getCroppedImage">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'

export default {
  props: ['imgSrc'],
  data() {
    return {
      visible: false,
      cropper: null
    }
  },
  methods: {
    initCropper() {
      this.$nextTick(() => {
        this.cropper = new Cropper(this.$refs.image, {
          aspectRatio: 16 / 9,
          viewMode: 1,
          autoCropArea: 0.8
        })
      })
    },
    getCroppedImage() {
      const canvas = this.cropper.getCroppedCanvas()
      canvas.toBlob(blob => {
        this.$emit('cropped', blob)
        this.visible = false
      })
    }
  }
}
</script>

调用示例

在父组件中使用封装好的裁剪组件：

<template>
  <div>
    <el-upload
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange">
      <el-button>选择图片</el-button>
    </el-upload>
    <image-cropper
      ref="cropper"
      :imgSrc="cropperImgSrc"
      @cropped="handleCropped"/>
  </div>
</template>

<script>
import ImageCropper from './ImageCropper.vue'

export default {
  components: { ImageCropper },
  data() {
    return {
      cropperImgSrc: ''
    }
  },
  methods: {
    handleFileChange(file) {
      const reader = new FileReader()
      reader.onload = e => {
        this.cropperImgSrc = e.target.result
        this.$refs.cropper.visible = true
        this.$refs.cropper.initCropper()
      }
      reader.readAsDataURL(file.raw)
    },
    handleCropped(blob) {
      // 处理裁剪后的图片数据
      console.log(blob)
    }
  }
}
</script>

样式优化

添加必要的样式确保裁剪区域正常显示：

.cropper-container {
  width: 100%;
  height: 400px;
  margin-bottom: 1rem;
}

.cropper-crop-box, .cropper-view-box {
  border-radius: 50%;
}

.el-dialog__body {
  padding: 20px;
}

常见问题解决

1. 图片跨域问题
   若图片来自外部URL，需在Cropper配置中设置：

   checkCrossOrigin: false

2. 移动端适配
   添加响应式处理：

   new Cropper(image, {
     responsive: true,
     restore: false
   })

3. TypeError问题
   确保在组件销毁时清理Cropper实例：

   beforeDestroy() {
     this.cropper && this.cropper.destroy()
   }