fix: improve download for mobile

Honoka55 · Feb 28, 2024 · 3ef4aab · 3ef4aab
1 parent e7d9f7f
commit 3ef4aab
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@ <h1>
         </select>
         <input type="text" id="text3" maxlength="13" style="width:200px" required value="ナイトコードで"> 。<br>
         <button id="submit-btn" disabled>生成</button>
-        <a id="download-btn" download="logo.png" href="#" disabled>保存</a>
+        <button id="download-btn" disabled>保存</button>
         <input type="range" id="slider" min="0" max="0" step="1" value="0" disabled>
     </div>
     <div id="canvas-container"></div>

diff --git a/script.js b/script.js
@@ -252,8 +252,24 @@ window.onload = () => {
                                 ctx.font = '13px kana';
                                 ctx.fillText('honoka55.github.io/25ji-generator', canvas.width - 210, 16);
                             }
+
                             const dataURL = canvas.toDataURL('image/png');
-                            downloadBtn.href = dataURL;
+                            const byteString = atob(dataURL.split(',')[1]);
+                            const arrayBuffer = new ArrayBuffer(byteString.length);
+                            const uint8Array = new Uint8Array(arrayBuffer);
+
+                            for (let i = 0; i < byteString.length; i++) {
+                                uint8Array[i] = byteString.charCodeAt(i);
+                            }
+
+                            const blob = new Blob([arrayBuffer], { type: 'image/png' });
+                            const url = window.URL.createObjectURL(blob);
+
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = 'logo.png';
+                            a.click();
+                            window.URL.revokeObjectURL(url);
                             ctx.clearRect(canvas.width - 210, 0, canvas.width, 20);
                         });
 

diff --git a/style.css b/style.css
@@ -153,8 +153,7 @@ input[type='range']::-moz-range-thumb {
     cursor: pointer;
 }
 
-button,
-#download-btn {
+button {
     font-family: Andika, var(--zh-font-family), sans-serif;
     display: inline-block;
     padding: 5px 18px;
@@ -169,12 +168,10 @@ button,
     transition: background-color 0.3s;
     vertical-align: middle;
 }
-button:hover,
-#download-btn:hover {
+button:hover {
     background-color: #6a3377;
 }
-button[disabled],
-#download-btn[disabled] {
+button[disabled] {
     background-color: #ccc;
     color: #666;
     pointer-events: none;