vue3 vue-cropper@next 实现图片裁切功能

Vue Cropper

实现上传图片预览，裁切上传效果

在这里插入图片描述

下载

pnpm add vue-cropper@next

使用

<template>
    <input
        ref="inputRef"
        class="hidden"
        accept=".png,.jpeg,.jpg"
        multiple
        type="file"
        @change="handleUploadChange"
    />
    <div @click="submitUpload">上传</div>

    <div class="flex mt-50px">
        <div class="w-400px h-360px">
            <vue-cropper
                ref="cropperRef"
                :img="image"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                @real-time="realTime"
            ></vue-cropper>
        </div>

        <!-- 实时预览 -->
        <div v-html="preview.html"></div>

        <div @click="handleConfirm">确认</div>
    </div>
</template>

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

import { ref } from "vue";
const preview = ref<any>({});
const inputRef = ref();
function submitUpload() {
    inputRef.value?.click();
}
const image = ref();
async function handleUploadChange(e: Event) {
    const { files } = e.target as HTMLInputElement;
    if (files && files.length >= 1) {
        const file = files[0];

        const reader = new FileReader();
        reader.onload = (e) => {
            // data:image/jpeg;base64,/9j/4....
            image.value = e.target?.result;
        };
        reader.readAsDataURL(file);

        if (inputRef.value?.value) {
            inputRef.value.value = "";
        }
    }
}

const cropperRef = ref();
// 配置项
const option = ref({
    outputSize: 1, // 裁剪生成图片的质量
    outputType: "jpeg || png || webp", // 裁剪生成图片的格式
    info: true, // 裁剪框的大小信息
    canScale: true, // 图片是否允许滚轮缩放
    autoCrop: true, //    是否默认生成截图框
    autoCropWidth: 120, // 默认生成截图框宽度
    autoCropHeight: 120, // 默认生成截图框高度
    fixed: true, // 是否开启截图框宽高固定比例
    fixedBox: false, // 固定截图框大小
    canMove: true, // 上传图片是否可以移动
    canMoveBox: true, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: false, // 截图框是否被限制在图片里面
    high: true, // 是否按照设备的dpr 输出等比例图片
    infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    maxImgSize: 2000, // 限制图片最大宽度和高度
    enlarge: 1, // 图片根据截图框输出比例倍数
    mode: "100%",
});

function realTime(data: any) {
    console.log("data", data);
    preview.value = data;
}
function handleConfirm() {
    cropperRef.value?.getCropBlob((data: Blob) => {
        // data Blob
    });
}
</script>
<style scoped></style>