diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx index 52f7829..aecbd6a 100644 --- a/apps/frontend/src/app/page.tsx +++ b/apps/frontend/src/app/page.tsx @@ -217,7 +217,34 @@ export default function App() { const response = await fetch(photo.src); if (!response.ok) throw new Error("Failed to fetch image"); - const blob = await response.blob(); + let blob = await response.blob(); + + // 대부분의 브라우저는 클립보드 복사 시 image/png만 지원하므로, + // 형식이 다를 경우 canvas를 이용해 PNG로 변환합니다. + if (blob.type !== "image/png") { + const img = new Image(); + const url = URL.createObjectURL(blob); + img.src = url; + + await new Promise((resolve, reject) => { + img.onload = resolve; + img.onerror = reject; + }); + + const canvas = document.createElement("canvas"); + canvas.width = img.width; + canvas.height = img.height; + const ctx = canvas.getContext("2d"); + if (!ctx) throw new Error("Canvas context를 가져오지 못했습니다."); + ctx.drawImage(img, 0, 0); + + const pngBlob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png")); + URL.revokeObjectURL(url); + + if (!pngBlob) throw new Error("PNG 변환에 실패했습니다."); + blob = pngBlob; + } + const clipboardItem = new ClipboardItem({ [blob.type]: blob });