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> => {
    return new Promise((resolve, reject) => {
        if (!cropperInstance.value) {
            reject(new Error('裁剪组件未初始化'))
            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) return
    cropperInstance.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>