vue3和ts和vue-cropper 实现图片裁剪预览

//npm 安装npm install vue-cropper//yarn 安装yarn add vue-cropper

<script lang="ts" setup>import'vue-cropper/dist/index.css'import { VueCropper } from 'vue-cropper'const emit = defineEmits(['realTime'])const props = defineProps({ width: { type: Number, default: 640 }, height: { type: Number, default: 740 }})const options = reactive({ img: '', autoCrop: true, autoCropWidth: 640, autoCropHeight: 740, fillColor: '#fff',//裁剪框填充颜色fixedBox:true//固定裁剪框})const cropperInstance = ref()const blobData = ref(new Blob())const init = () => { options.img = ''}const selectImg = async (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0]if(!file)return const reader =new FileReader() reader.onload = async e => { const img =new Image() img.onload = async () =>{//强制放大到最小尺寸 const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d')! // 设置 canvas 尺寸 canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) options.img = canvas.toDataURL() await nextTick() // 等待 DOM 更新后设置裁剪框 setFixedCropBox() } img.src = e.target!.result as string } reader.readAsDataURL(file)}const setFixedCropBox = () =>{if(!cropperInstance.value?.cropper)return//正确访问cropper实例 const cropper =cropperInstance.value.cropper//获取容器真实尺寸 const containerWidth = cropper.containerData.width const containerHeight =cropper.containerData.height//计算居中位置 const left = (containerWidth - props.width) / 2 const top = (containerHeight - props.height) / 2 //正确调用方法 cropper.setCropBoxData({ width: props.width, height: props.height, left, top })}//实时预览const realTime = (data: any) => { emit('realTime', data.html)}// 获取截图的数据 getCropBlob => blob数据const tailoring = (): Promise<Blob> =>{returnnew Promise((resolve, reject) =>{if(!cropperInstance.value) { reject(newError('裁剪组件未初始化'))return } cropperInstance.value.getCropBlob((data: Blob) =>{if (data) { blobData.value = data resolve(data) } else { reject(new Error('裁剪失败，未获取到 Blob')) } }) })}//旋转const rotateLeft = () =>{if(!cropperInstance.value)return cropperInstance.value.rotateLeft()}const rotateRight = () =>{if(!cropperInstance.value)returncropperInstance.value.rotateRight()}onMounted(()=>{if (props.width && props.height) { options.autoCropWidth = props.width options.autoCropHeight = props.height }})defineExpose({ options, selectImg, realTime, tailoring, blobData, init, rotateLeft, rotateRight })</script><template> <vue-cropper ref="cropperInstance":img="options.img":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox":fillColor="options.fillColor"@real-time="realTime" /></template>