elementui cropper

以下是关于 ElementUI 与图片裁剪（Cropper）整合的解决方案，结合常见实现方式和代码示例：

安装依赖

需要同时安装 ElementUI 和图片裁剪库（如 vue-cropperjs）。通过 npm 或 yarn 添加依赖：

npm install element-ui vue-cropperjs

基础组件集成

在 Vue 组件中引入 ElementUI 的上传组件和裁剪组件：

import { Upload } from 'element-ui';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

模板结构

组合使用 el-upload 和 vue-cropper 组件：

<el-upload
  action="#"
  :auto-upload="false"
  :on-change="handleFileChange"
  :show-file-list="false">
  <el-button type="primary">选择图片</el-button>
</el-upload>

<vue-cropper
  ref="cropper"
  :src="imgSrc"
  :aspect-ratio="16/9"
  :view-mode="1"
  v-if="imgSrc"
/>

数据处理逻辑

处理文件选择并初始化裁剪：

data() {
  return {
    imgSrc: '',
    croppedImg: null
  }
},
methods: {
  handleFileChange(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.imgSrc = e.target.result;
    };
    reader.readAsDataURL(file.raw);
  },
  cropImage() {
    this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
      this.croppedImg = URL.createObjectURL(blob);
    });
  }
}

样式调整

为裁剪容器添加固定尺寸确保正常显示：

.cropper-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}

高级配置选项

可通过 Cropper 的 props 进行深度定制：

:auto-crop="true"
:auto-crop-area="0.8"
:background="false"
:rotatable="true"

注意事项

• 移动端需额外处理触摸事件兼容性
• 大图片建议压缩后再进行裁剪
• 服务端接收时注意处理 Base64 或 Blob 格式转换

完整实现可参考 GitHub 上的 element-ui-cropper-demo 等开源项目。实际开发中应根据项目需求调整比例限制、预览区域等参数。