motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션) o

Browse Source
This commit is contained in:
koreacomp5
2025-10-09 18:14:22 +09:00
parent be9eb5f530
commit 0f375bdd67
5 changed files with 80 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/components/UploadButton.tsx
View File

@@ -8,6 +8,8 @@ type Props = {
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> {
@@ -19,26 +21,61 @@ async function readFileAsDataUrl(file: File): Promise<string> {
});
}
async function resizeImageToBlob(dataUrl: string, opts: { maxWidth: number; maxHeight: number; quality: number }): Promise<Blob> {
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; });
const { naturalWidth: w, naturalHeight: h } = img;
const scale = Math.min(1, opts.maxWidth / w || 1, opts.maxHeight / h || 1);
const targetW = Math.max(1, Math.round(w * scale));
const targetH = Math.max(1, Math.round(h * scale));
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, 0, 0, targetW, targetH);
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 }: Props) {
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>) {
@@ -49,7 +86,7 @@ export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, ma
for (const f of files) {
// 클라에서 리사이즈 및 webp 변환
const dataUrl = await readFileAsDataUrl(f);
const blob = await resizeImageToBlob(dataUrl, { maxWidth, maxHeight, quality });
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 });