From a62c4d52fb35a61509eee6481b962834b02ce92c Mon Sep 17 00:00:00 2001
From: wewewe-ok <combination.kyoukyou@gmail.com>
Date: Thu, 18 Apr 2024 16:02:58 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20=E3=82=A2=E3=82=B9=E3=82=AD=E3=83=BC?=
 =?UTF-8?q?=E3=82=A2=E3=83=BC=E3=83=88=E3=82=92=E3=83=80=E3=82=A6=E3=83=B3?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=89=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 islands/ImageForm.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/islands/ImageForm.tsx b/islands/ImageForm.tsx
index 8f5f6af..824043b 100644
--- a/islands/ImageForm.tsx
+++ b/islands/ImageForm.tsx
@@ -74,6 +74,21 @@ export default function ImageForm() {
     buttonDisable.value = false;
     isAnnounsing.value = false;
   };
+
+  const downloadAsciiArt = () => {
+    const asciiArtPreview = document.getElementById(
+      "ascii-art",
+    ) as HTMLImageElement;
+    const asciiArt = asciiArtPreview.src;
+    console.log(asciiArt);
+    const download = document.createElement("a");
+    download.href = asciiArt;
+    download.download = "ascii-art.png";
+    document.body.appendChild(download);
+    download.click();
+    document.body.removeChild(download);
+  };
+
   return (
     <div class="content-center items-center self-center translate-x-1/4">
       <form action="post">
@@ -103,6 +118,13 @@ export default function ImageForm() {
         : undefined}
       <img id="preview" class="max-w-xs max-h-56 " />
       <img id="ascii-art" src="" class="max-w-xs max-h-56 content-center" />
+      <button
+        onClick={() => {
+          downloadAsciiArt();
+        }}
+      >
+        アスキーアートをダウンロード
+      </button>
     </div>
   );
 }