114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { useToast } from "@/app/components/ui/ToastProvider";
|
|
|
|
type Props = {
|
|
onUploaded: (url: string) => void;
|
|
multiple?: boolean;
|
|
maxWidth?: number;
|
|
maxHeight?: number;
|
|
quality?: number; // 0..1
|
|
aspectRatio?: number; // width/height, e.g., 1 for square, 16/9 for widescreen
|
|
watermarkText?: string; // optional watermark text
|
|
};
|
|
|
|
async function readFileAsDataUrl(file: File): Promise<string> {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(String(reader.result));
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
function drawWatermark(ctx: CanvasRenderingContext2D, text: string, canvas: HTMLCanvasElement) {
|
|
const padding = 8;
|
|
ctx.save();
|
|
ctx.font = "bold 14px sans-serif";
|
|
const metrics = ctx.measureText(text);
|
|
const textW = metrics.width;
|
|
const textH = 14;
|
|
const x = canvas.width - textW - padding * 2;
|
|
const y = canvas.height - textH - padding;
|
|
ctx.fillStyle = "rgba(0,0,0,0.35)";
|
|
ctx.fillRect(x - padding, y - padding, textW + padding * 2, textH + padding * 2);
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillText(text, x, y + textH);
|
|
ctx.restore();
|
|
}
|
|
|
|
async function transformImageToBlob(
|
|
dataUrl: string,
|
|
opts: { maxWidth: number; maxHeight: number; quality: number; aspectRatio?: number; watermarkText?: string }
|
|
): Promise<Blob> {
|
|
const img = document.createElement("img");
|
|
img.decoding = "async";
|
|
img.loading = "eager";
|
|
img.src = dataUrl;
|
|
await new Promise((res, rej) => { img.onload = () => res(null); img.onerror = rej; });
|
|
let srcW = img.naturalWidth || 1;
|
|
let srcH = img.naturalHeight || 1;
|
|
let sx = 0, sy = 0, sW = srcW, sH = srcH;
|
|
if (opts.aspectRatio && opts.aspectRatio > 0) {
|
|
const targetRatio = opts.aspectRatio;
|
|
const currentRatio = srcW / srcH;
|
|
if (currentRatio > targetRatio) {
|
|
// too wide -> crop width
|
|
sW = Math.round(srcH * targetRatio);
|
|
sx = Math.round((srcW - sW) / 2);
|
|
} else if (currentRatio < targetRatio) {
|
|
// too tall -> crop height
|
|
sH = Math.round(srcW / targetRatio);
|
|
sy = Math.round((srcH - sH) / 2);
|
|
}
|
|
}
|
|
const scale = Math.min(1, opts.maxWidth / sW || 1, opts.maxHeight / sH || 1);
|
|
const targetW = Math.max(1, Math.round(sW * scale));
|
|
const targetH = Math.max(1, Math.round(sH * scale));
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = targetW;
|
|
canvas.height = targetH;
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) throw new Error("Canvas unsupported");
|
|
ctx.drawImage(img, sx, sy, sW, sH, 0, 0, targetW, targetH);
|
|
if (opts.watermarkText) drawWatermark(ctx, opts.watermarkText, canvas);
|
|
return await new Promise((resolve) => canvas.toBlob((b) => resolve(b as Blob), "image/webp", opts.quality));
|
|
}
|
|
|
|
export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, maxHeight = 1600, quality = 0.9, aspectRatio, watermarkText }: Props) {
|
|
const { show } = useToast();
|
|
const [loading, setLoading] = useState(false);
|
|
async function onChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const input = e.currentTarget; // React 이벤트 풀링 대비: 참조 보관
|
|
const files = Array.from(input.files ?? []);
|
|
if (files.length === 0) return;
|
|
try {
|
|
setLoading(true);
|
|
for (const f of files) {
|
|
// 클라에서 리사이즈 및 webp 변환
|
|
const dataUrl = await readFileAsDataUrl(f);
|
|
const blob = await transformImageToBlob(dataUrl, { maxWidth, maxHeight, quality, aspectRatio, watermarkText });
|
|
const fd = new FormData();
|
|
fd.append("file", new File([blob], `${Date.now()}.webp`, { type: "image/webp" }));
|
|
const r = await fetch("/api/uploads", { method: "POST", body: fd });
|
|
const data = await r.json();
|
|
if (!r.ok) throw new Error(JSON.stringify(data));
|
|
onUploaded(data.url);
|
|
}
|
|
show("업로드 완료");
|
|
} catch (e) {
|
|
show("업로드 실패");
|
|
} finally {
|
|
setLoading(false);
|
|
// 선택값 초기화(같은 파일 재선택 가능하도록)
|
|
if (input) input.value = "";
|
|
}
|
|
}
|
|
return <label style={{ display: "inline-block" }}>
|
|
<span style={{ padding: "6px 10px", border: "1px solid #ddd", borderRadius: 6, cursor: "pointer" }}>{loading ? "업로드 중..." : "이미지 업로드"}</span>
|
|
<input type="file" accept="image/*" onChange={onChange} style={{ display: "none" }} multiple={multiple} />
|
|
</label>;
|
|
}
|
|
|
|
|