diff --git a/src/utils/copyZzal.ts b/src/utils/copyZzal.ts new file mode 100644 index 00000000..c7d2da4e --- /dev/null +++ b/src/utils/copyZzal.ts @@ -0,0 +1,59 @@ +import { toast } from "react-toastify"; +import axios from "axios"; + +const copyToClipboard = (pngBlob: Blob) => { + try { + navigator.clipboard.write([ + new ClipboardItem({ + [pngBlob.type]: pngBlob, + }), + ]); + toast.success("성공적으로 복사되었습니다."); + } catch (error) { + toast.error("복사에 실패했습니다."); + console.error(error); + } +}; + +const copyImageToClipboard = (imageBlob: Blob) => { + const image = new Image(); + image.src = URL.createObjectURL(imageBlob); + + image.onload = () => { + const canvas = document.createElement("canvas"); + canvas.width = image.naturalWidth; + canvas.height = image.naturalHeight; + + const ctx = canvas.getContext("2d"); + + if (!ctx) { + console.error("Canvas context를 생성할 수 없습니다."); + return; + } + + ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight); + canvas.toBlob((blob) => { + if (blob) { + copyToClipboard(blob); + return; + } + + console.error("Canvas to Blob 변환 실패"); + }, "image/png"); + }; + + image.onerror = () => { + console.error("이미지 로딩 실패"); + }; +}; + +export const copyZzal = async (imageUrl: string) => { + try { + const { data: imageBlob } = await axios.get(imageUrl, { responseType: "blob" }); + + copyImageToClipboard(imageBlob); + } catch (error) { + toast.error("복사에 실패했습니다."); + console.error(error); + } +};