安装cropperjs插件
npm install cropperjs
裁剪框以及图片的一些设置说明
ViewMode 视图控制
取值：
0 无限制，裁剪框可以移动到图片外，预览时图片外的地方用黑色填充1 限制裁剪框只能在图片范围内移动 2 限制裁剪框不能超出图片的范围，且图片不全部占满后面的网格背景3 限制裁剪框不能超出图片的范围，且图片占满后面全部网格背景(短的那边填充)
dragMode 拖拽图片模式
取值：
crop 形成新的裁剪框move 图片可移动none 什么也没有
实现图片的裁剪以及预览
<template><div id="box"><button @click="sureSave">裁剪</button><div class="box"><div class="box_1"><img src="./cropper.jpeg" ref="image" style="width:300px;height:300px"/></div><!-- 裁剪完的图片 --><p>裁剪后的图片为：</p><div class="cropper"><img :src="afterImg" /></div></div></div></template><script>import { defineComponent, onMounted, reactive, toRefs } from 'vue'import Cropper from 'cropperjs'import 'cropperjs/dist/cropper.css'export default defineComponent({setup () {const data = reactive({afterImg: '',image: null,myCropper: null})onMounted(() => {data.myCropper = new Cropper(data.image, {viewMode: 0, // 设置裁剪框可以超出图片范围dragMode: 'move', // 设置被裁剪的图片可移动backgrounde: true, // 是否显示图片后的网格背景preview: '.before', // 进行图片预览效果autoCropArea: 0.8, // 设置裁剪区域占图片的大小，值为0-1，0.8表示占80%区域zoomOnWheel: true, // 设置图片是否可以进行收缩功能center: true // 是否显示中间的 + 箭头})})const sureSave = () => {// 裁剪后的图片data.afterImg = data.myCropper.getCroppedCanvas({imageSmoothingQuality: 'high'}).toDataURL('image/jpeg') // 设置图片格式}return {// data,sureSave,// toRefs()函数可以将reactive()创建出来的响应式对象转换为普通对象,只不过这个普通对象上的每一个属性都是响应式的...toRefs(data)}}})</script>
