Aタグをクリックすると画像を保存する前に自分自身のURLに移動してしまう状態をButtonタグに変更しました。

Author: hideki-masuoka

thumbnail-maker.html

@@ -4,7 +4,7 @@
 
 <div class="thumbnail-maker">
     <div class="title-block">
-        <h1 class="title">DojoCon Japan 2022 サムネイルメーカー</h1>
+        <h1 class="title">DojoCon Japan 2021 サムネイルメーカー</h1>
     </div>
     <div class="thumbnail-preview">
         <div class="main-flex">
@@ -17,7 +17,7 @@ <h1 class="title">DojoCon Japan 2022 サムネイルメーカー</h1>
         </div>
     </div>
     <div class="links">
-        <a id="img-download-btn" class="btn inline-block" href="">画像をダウンロード</a>
+        <button id="img-download-btn" class="btn inline-block">画像をダウンロード</button>
         <a id="img-show-btn" class="inline-block" href="https://dcj2021-thumbnail-maker.ymsg.space/?text=">ダウンロードできない場合はこちら</a>
     </div>
 </div>
@@ -43,10 +43,15 @@ <h1 class="title">DojoCon Japan 2022 サムネイルメーカー</h1>
         imgShowBtn.href = `https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`;
     }
 
-    const downloadThumbnail = () => {
+    const downloadThumbnail = async () => {
         const textarea = document.getElementById('message-box');
         const text = Base64.encodeURI(textarea.value);
-        saveAs(`https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`, 'thumbnail.png');
+        //saveAs(`https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`, 'thumbnail.png');
+
+        const response = await fetch(`https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`);
+        return response.blob().then( (imgBlob) => {
+            saveAs(imgBlob, 'thumbnail.png');
+        });
     }
 
     document.getElementById("message-box").addEventListener("input", (e) => {
@@ -58,7 +63,9 @@ <h1 class="title">DojoCon Japan 2022 サムネイルメーカー</h1>
         setImageDownloadURL(e.target);
     });
 
-    document.getElementById("img-download-btn").addEventListener("click", (e) => {
-        downloadThumbnail();
+    document.getElementById("img-download-btn").addEventListener("click", async (e) => {
+        e.target.disabled = true;
+        await downloadThumbnail();
+        e.target.disabled = false;
     });
-</script>
+</script>