Browse Source
- Added ImageCropModal component for cropping images before upload. - Updated profile page to handle image cropping for avatar and header icon. - Included vue-advanced-cropper as a dependency in package.json and bun.lock. Made-with: Cursormain
5 changed files with 211 additions and 8 deletions
@ -0,0 +1,156 @@ |
|||
<script setup lang="ts"> |
|||
import { CircleStencil, Cropper, RectangleStencil } from 'vue-advanced-cropper' |
|||
import 'vue-advanced-cropper/dist/style.css' |
|||
|
|||
const props = defineProps<{ |
|||
file: File | null |
|||
variant: 'avatar' | 'headerIcon' |
|||
}>() |
|||
|
|||
const emit = defineEmits<{ |
|||
confirm: [file: File] |
|||
}>() |
|||
|
|||
const open = defineModel<boolean>('open', { default: false }) |
|||
|
|||
const imageSrc = ref<string | null>(null) |
|||
const cropperRef = ref<{ getResult: () => { canvas?: HTMLCanvasElement } } | null>(null) |
|||
const confirming = ref(false) |
|||
|
|||
const title = computed(() => |
|||
props.variant === 'avatar' ? '裁剪头像' : '裁剪公开主页顶栏图标', |
|||
) |
|||
|
|||
const stencilComponent = computed(() => |
|||
props.variant === 'avatar' ? CircleStencil : RectangleStencil, |
|||
) |
|||
|
|||
const stencilProps = { aspectRatio: 1 } |
|||
|
|||
const outputMaxSide = computed(() => (props.variant === 'avatar' ? 512 : 512)) |
|||
|
|||
watch( |
|||
() => ({ isOpen: open.value, f: props.file }), |
|||
({ isOpen, f }) => { |
|||
if (imageSrc.value) { |
|||
URL.revokeObjectURL(imageSrc.value) |
|||
imageSrc.value = null |
|||
} |
|||
if (isOpen && f) { |
|||
imageSrc.value = URL.createObjectURL(f) |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
) |
|||
|
|||
onBeforeUnmount(() => { |
|||
if (imageSrc.value) { |
|||
URL.revokeObjectURL(imageSrc.value) |
|||
} |
|||
}) |
|||
|
|||
function canvasToOutputFile( |
|||
source: HTMLCanvasElement, |
|||
mime: string, |
|||
maxSide: number, |
|||
filename: string, |
|||
): Promise<File> { |
|||
let w = source.width |
|||
let h = source.height |
|||
let canvas = source |
|||
if (w > maxSide || h > maxSide) { |
|||
const scale = maxSide / Math.max(w, h) |
|||
w = Math.round(w * scale) |
|||
h = Math.round(h * scale) |
|||
const c = document.createElement('canvas') |
|||
c.width = w |
|||
c.height = h |
|||
const ctx = c.getContext('2d') |
|||
if (!ctx) { |
|||
throw new Error('无法创建画布上下文') |
|||
} |
|||
ctx.drawImage(source, 0, 0, w, h) |
|||
canvas = c |
|||
} |
|||
const quality = mime === 'image/jpeg' ? 0.92 : mime === 'image/webp' ? 0.9 : undefined |
|||
return new Promise((resolve, reject) => { |
|||
canvas.toBlob( |
|||
(blob) => { |
|||
if (!blob) { |
|||
reject(new Error('导出图片失败')) |
|||
return |
|||
} |
|||
resolve(new File([blob], filename, { type: blob.type })) |
|||
}, |
|||
mime, |
|||
quality, |
|||
) |
|||
}) |
|||
} |
|||
|
|||
function pickOutputMime(original: File | null): { mime: string; ext: string } { |
|||
const t = original?.type |
|||
if (t === 'image/png') { |
|||
return { mime: 'image/png', ext: 'png' } |
|||
} |
|||
if (t === 'image/webp') { |
|||
return { mime: 'image/webp', ext: 'webp' } |
|||
} |
|||
return { mime: 'image/jpeg', ext: 'jpg' } |
|||
} |
|||
|
|||
async function onConfirm() { |
|||
const cropper = cropperRef.value |
|||
if (!cropper || !props.file) { |
|||
return |
|||
} |
|||
confirming.value = true |
|||
try { |
|||
const { canvas } = cropper.getResult() |
|||
if (!canvas) { |
|||
throw new Error('无法生成裁剪图') |
|||
} |
|||
const { mime, ext } = pickOutputMime(props.file) |
|||
const base = props.file.name.replace(/\.[^.]+$/, '') || 'image' |
|||
const out = await canvasToOutputFile(canvas, mime, outputMaxSide.value, `${base}-cropped.${ext}`) |
|||
emit('confirm', out) |
|||
open.value = false |
|||
} finally { |
|||
confirming.value = false |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<UModal |
|||
v-model:open="open" |
|||
:title="title" |
|||
description="拖动、缩放图片以选取区域；确认后将上传裁剪后的图片。" |
|||
class="w-[calc(100vw-2rem)] sm:max-w-lg" |
|||
> |
|||
<template #body> |
|||
<div v-if="imageSrc" class="space-y-3"> |
|||
<Cropper |
|||
ref="cropperRef" |
|||
class="min-h-[280px] h-[min(52vh,420px)] rounded-lg bg-elevated" |
|||
:src="imageSrc" |
|||
:stencil-component="stencilComponent" |
|||
:stencil-props="stencilProps" |
|||
/> |
|||
<p class="text-xs text-muted"> |
|||
{{ variant === 'avatar' ? '头像将显示为圆形，建议把主体放在圆内。' : '顶栏图标为方形显示。' }} |
|||
</p> |
|||
</div> |
|||
</template> |
|||
<template #footer="{ close }"> |
|||
<div class="flex justify-end gap-2"> |
|||
<UButton type="button" variant="outline" color="neutral" @click="close"> |
|||
取消 |
|||
</UButton> |
|||
<UButton type="button" :loading="confirming" :disabled="!imageSrc" @click="onConfirm"> |
|||
确认并上传 |
|||
</UButton> |
|||
</div> |
|||
</template> |
|||
</UModal> |
|||
</template> |
|||
Binary file not shown.
Loading…
Reference in new issue