Vue2 + vue-cropper：快速实现图片剪裁功能

在现代化的Web应用中，图片剪裁功能已经成为提升用户体验的重要部分。在本教程中，我们将学习如何在Vue2项目中使用vue-cropper插件来实现一个简单且强大的图片剪裁功能。

简介

vue-cropper 是一个基于 Vue 2 的图片剪裁插件，它提供了丰富的配置选项和简洁的API，使得图片剪裁变得异常简单。以下是我们将要实现的功能：

上传图片
调整剪裁区域
旋转图片
剪裁并导出图片

安装vue-cropper

首先，我们需要在Vue2项目中安装vue-cropper。在你的项目目录下运行以下命令：

css 复制代码

npm install vue-cropper --save

或者使用yarn：

csharp 复制代码

yarn add vue-cropper

引入vue-cropper

在Vue组件中引入vue-cropper：

javascript 复制代码

import VueCropper from 'vue-cropper' 
export default { 
  components: { 
    VueCropper 
    } 
  }

使用vue-cropper

在模板中添加vue-cropper组件：

ini 复制代码

<div class="dialog-content">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="cropper-content">
            <div class="cropper" style="width: 100%; height: 900px"> // 这个宽高是必须给的
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :canScale='option.canScale'
                :autoCrop='option.autoCrop'
                :autoCropWidth='option.autoCropWidth'
                :autoCropHeight='option.autoCropHeight'
                :canMoveBox='option.canMoveBox'
                :canMove='option.canMove'
                :centerBox='option.centerBox'
                :info='option.info'
                :fixedBox='option.fixedBox'
              ></vueCropper>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    ```

方法实现

在组件的methods中添加剪裁图片的方法：

javascript 复制代码

// 图片剪裁
cutPic(data) {
  console.log('图片剪裁', data);
  this.dialogCutOwnPicVisible = true;
},
// 获取剪裁之后的图片数据
handleQuickEditorSubmit() {
  this.$refs.cropper.getCropData((data) => {
    // 创建一个临时的链接元素
    const link = document.createElement('a');
    link.href = data;
    link.download = 'cropped-image'; // 设置下载文件名
    document.body.appendChild(link);
    link.click(); // 触发下载
    document.body.removeChild(link); // 下载后移除元素
  });
},

上传图片

为了使用户能够上传图片，你可以添加一个文件输入元素：

ini 复制代码

<input type="file" @change="uploadImage" />

并在methods中添加上传图片的方法：

ini 复制代码

methods: {
  uploadImage(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  },
  // ...其他方法
}

结论

通过以上步骤，你已经成功地在Vue2项目中集成了vue-cropper，实现了图片剪裁功能。这个功能不仅提高了用户的交互体验，也为你的应用增添了更多的实用性。你可以根据项目需求进一步定制和优化剪裁功能。

这篇文章提供了一个基本的指南，用于在Vue2项目中集成vue-cropper。根据实际需求，你可以添加更多的功能和细节，比如图片预览、剪裁比例选择等。以下是完整代码：

javascript 复制代码

  <el-dialog
    title="图片剪裁"
    :visible.sync="dialogCutOwnPicVisible"
    width="70%"
    top="2vh"
    :modal-append-to-body="false"
    custom-class="center-dialog"
  >
    <div class="dialog-content">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="cropper-content">
            <div class="cropper" style="width: 100%; height: 900px"> // 这个宽高是必须给的
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :canScale='option.canScale'
                :autoCrop='option.autoCrop'
                :autoCropWidth='option.autoCropWidth'
                :autoCropHeight='option.autoCropHeight'
                :canMoveBox='option.canMoveBox'
                :canMove='option.canMove'
                :centerBox='option.centerBox'
                :info='option.info'
                :fixedBox='option.fixedBox'
              ></vueCropper>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
  <el-button size="mini" @click="dialogCutOwnPicVisible = false">取 消</el-button>
  <el-button size="mini" type="primary" @click="handleQuickEditorSubmit">确 定</el-button>
</span>
  </el-dialog>
import { VueCropper }  from 'vue-cropper'
components: {
  VueCropper
},
dialogCutOwnPicVisible: false, // 选择剪裁
option: {
  img: '', // 裁剪图片的地址
  outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
  outputType: 'png', // 裁剪生成图片的格式（jpeg || png || webp）
  info: true, // 图片大小信息
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 300, // 默认生成截图框宽度
  autoCropHeight: 300, // 默认生成截图框高度
  fixed: false, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例
  full: false, // false按原比例裁切图片，不失真
  fixedBox: false, // 固定截图框大小，不允许改变
  canMove: false, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: false, // 截图框是否被限制在图片里面
  height: true, // 是否按照设备的dpr 输出等比例图片
  infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
  maxImgSize: 3000, // 限制图片最大宽度和高度
  enlarge: 1 // 图片根据截图框输出比例倍数
}

// 图片剪裁按钮
cutPic(data) {
  console.log('图片剪裁', data);
  this.dialogCutOwnPicVisible = true;
  this.$nextTick(() => {
    this.option.img = data.assetPosition; // 自己的图片地址
  })

// 获取剪裁之后的图片数据-下载图片
handleQuickEditorSubmit() {
  this.$refs.cropper.getCropData((data) => {
    // 创建一个临时的链接元素
    const link = document.createElement('a');
    link.href = data;
    link.download = 'cropped-image'; // 设置下载文件名
    document.body.appendChild(link);
    link.click(); // 触发下载
    document.body.removeChild(link); // 下载后移除元素
  });
},

.cropper-content {
  display: flex;
  justify-content: center;
  align-items: center;
}