Vue Cropper

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

下载

pnpm add vue-cropper@next

使用

<template><inputref="inputRef"class="hidden"accept=".png,.jpeg,.jpg"multipletype="file"@change="handleUploadChange"/><div @click="submitUpload">上传</div><div class="flex mt-50px"><div class="w-400px h-360px"><vue-cropperref="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>