vue3+vue-cropper图片裁剪个人使用记录

使用vite创建vue3+vite的项目

vue3项目可以通过这里创建，具体看这里就行了，开始 | Vite 官方中文文档 (vitejs.dev)
使用element-plus组件，安装 | Element Plus (element-plus.org)
vue-copper插件的使用方法和安装看这个网站，里面有这个插件的使用教程，也可以看我下面的用法。vue-cropper - npm (npmjs.com)、 vue-cropper - npm (npmjs.com) ，这里有对应的版本信息列表，vue-cropper - npm (npmjs.com)、对应的github地址GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue

关于vue-cropper的使用

1、安装插件（组件）

以下是我看官网的方法，然后的使用过程记录如下，首先安装这个插件，这里使用的是vue3，在官网也有使用方法的教程，
vue-cropper - npm (npmjs.com)、vue-cropper - npm (npmjs.com)

npm install vue-cropper@next
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

安装之后，我们可以看到，package.json中已经有对应的环境包了

2、vue-cropper插件的简单使用

项目的目录结构如下所示，安装完成后，就可以直接使用插件了，具体代码在截图后面，代码在后面，代码在截图后面，代码在截图后面。


我这里解决爆红的办法就是，建立一个ts文件，然后使用export deault导出，就可以解决爆红问题了，还不影响后续的打包语法爆红。

在看代码前，先看一下vue-cropper具有的大概属性配置，方便理解后面的代码官网的文档说明在这里vue-cropper - npm (npmjs.com)，我把它截图下来了，图片来源于网络。

4、代码如下所示

ImgCorpper.vue的代码如下

<template>
  <div style="width: 100%; height: 100%;">
    <vueCropper style="width: 100%; height: 100%;" ref="cropper" 
    :img="option.img" 
    :outputSize="option.outputSize"
    :outputType="option.outputType" 
    :info="option.info" 
    :canScale="option.canScale" 
    :autoCrop="option.autoCrop"
    :autoCropWidth="option.autoCropWidth" 
    :autoCropHeight="option.autoCropHeight" 
    :fixedBox="option.fixedBox"
    :fixed="option.fixed" 
    :fixedNumber="option.fixedNumber" 
    :canMove="option.canMove" 
    :canMoveBox="option.canMoveBox"
    :original="option.original" 
    :centerBox="option.centerBox" 
    :infoTrue="option.infoTrue" 
    :full="option.full"
    :enlarge="option.enlarge" 
    :mode="option.mode">
  </vueCropper>
  </div>
</template>

<script setup lang="ts">
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import { reactive } from 'vue';

let option = reactive({
  img: '', // 裁剪图片的地址 url 地址, base64, blob
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
  info: true, // 裁剪框的大小信息
  canScale: false, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框宽度
  autoCropHeight: 150, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: false, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
  fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
  canMove: true, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  full: true, // 是否输出原图比例的截图
  enlarge: '1', // 图片根据截图框输出比例倍数
  mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
})


</script>

<style scoped>

</style>

App.vue的代码如下所示：

<template>
  <div style="width: 600px; height: 500px;">
    <ImgCorpper/>
  </div>
</template>

<script setup lang="ts">
import ImgCorpper from './components/ImgCorpper.vue';
</script>

<style scoped>

</style>

gitee地址

vueCropper_project: vue3图片裁剪组件的使用(gitee.com)

运行之后可以得到这样的一个结果

3、结合文件上传使用vue-cropper实现图片裁剪

图片来源于网路

以下是实现的GIF图，具体代码在GIF图的后面，其实这里应该是使用dialog弹窗的形式，可能会好一点，我这里为了方便，就先不弹窗了。后续补充最完整的代码的时候再结合el-dialog来做

这里文件上传使用的是，element-plus的文件上传组件，Upload 上传 | Element Plus (element-plus.org)，代码中的按钮也是使用的element-plus的按钮组件，Button 按钮 | Element Plus (element-plus.org)，具体用法可以参考官网，这里不过多描述了。
这里注意了，如果在使用element plus的文件上传组件爆红的话，虽然不影响运行，但是打包会有问题，具体看这里有说明，vite+ts+elementplus运行正常打包报错_m0_62317155的博客-CSDN博客，如下图所示

5、代码如下所示

代码的目录结构如下所示

VueCropper.ts的代码如下所示

import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
export default VueCropper;

ImgCorpper.vue 代码如下所示

<template>
  <div style="width: 100%; height: 100%;">
    <el-row style="width: 100%; height: 100%;">
      <vueCropper style="width: 100%; height: 100%;" ref="cropper" :img="option.img" :outputSize="option.outputSize"
        :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
        :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
        :original="option.original" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :full="option.full"
        :enlarge="option.enlarge" :mode="option.mode">
      </vueCropper>
    </el-row>
    <el-row style="width: 100%; height: 60px; margin-top: 10px;">
      <!-- 注意这里的action=""和 :auto-upload="false"，我把自动上传关了，免得点击上传图片的时候发送一次请求 -->
      <el-upload v-model:file-list="fileList" action="" :auto-upload="false" :show-file-list="false"
        :on-change="handleChange">
        <el-button type="primary">点击上传图片</el-button>
      </el-upload>
      <el-button type="primary" plain @click="rotateLeft">《=向左旋转图片</el-button>
      <el-button type="primary" plain @click="rotateRight">向有旋转图片=》</el-button>
      <el-button type="primary" @click="getCropDataBase64">获取截取的图片</el-button>
    </el-row>

    <hr>
    <div>
      展示截图的图片
    </div>
    <div style="width: 300px; height: 500px;">
      <!-- 若图片只设置宽度，可以保持等比例展示图片 -->
      <img :src="imgUrl" style="width: 100%;">
    </div>
  </div>
</template>

<script setup lang="ts">
import vueCropper from './VueCropper.ts'
import { ref, reactive } from 'vue';
// import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadFile } from 'element-plus'

const cropper = ref()
let option = reactive({
  img: '', // 裁剪图片的地址 url 地址, base64, blob
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpeg', // 裁剪生成图片的格式 jpeg, png, webp
  info: true, // 裁剪框的大小信息
  canScale: false, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框宽度
  autoCropHeight: 150, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: false, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
  fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
  canMove: true, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  full: true, // 是否输出原图比例的截图
  enlarge: '1', // 图片根据截图框输出比例倍数
  mode: 'contain' // 图片默认渲染方式 contain , cover, 100px, 100% auto
})

// 向左旋转图片
const rotateLeft = () => {
  // 这个默认是旋转90度的，官网有说明
  // 后面会完善不要让这个一下子旋转90度的代码
  cropper.value.rotateLeft()
}

// 向右旋转
const rotateRight = () => {
  // 这个默认也是旋转90度的，官网有说明
  // 后面会完善不要让这个一下子旋转90度的代码
  cropper.value.rotateRight()
}

// 获取图片
const getCropDataBase64 = () => {
  // 这个是获取base64的图片
  cropper.value.getCropData((data: any) => {
    // do something
    // 如这里，可以获取上传base64位的图片给服务器
    // 也可以将base64位的图片转化为file文件，然后通过form表单的形式提交给后端，让后端返回一个图片的访问地址等
    // 这里就简单把截取到的图片展示一下吧，这里就暂时不上传给后端了
    imgUrl.value = data
  })
}

const imgUrl = ref('')

const fileList = ref([])
// el-upload的change事件，具体看element-plus的官网
const handleChange: UploadProps['onChange'] = (
  uploadFile: UploadFile
) => {
  // URL.createObjectURL(uploadFile.raw!)，将图片变成blob的数据，类似于blob:http://127.0.0.1:5173/dbaf505d-df43-4448-809d-8daadf3e883c
  option.img = URL.createObjectURL(uploadFile.raw!)
}

</script>

<style scoped></style>

App.vue的代码如下所示

<template>
  <div style="width: 600px; height: 500px;">
    <ImgCorpper/>
  </div>
</template>

<script setup lang="ts">
import ImgCorpper from './components/ImgCorpper.vue';
</script>

<style scoped>

</style>

未完待续，有空补上这个插件的实时截图预览效果，这个官网有说明。有兴趣的小伙伴可以自己去试试。后面可能会先优先考虑补充如何让图片旋转角度不要一下子超过90度。