Added plain text and PNG image downloads

receiptline · Jan 9, 2025 · 485e111 · 485e111
1 parent b35be59
commit 485e111
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.1.0] - 2025-01-10
+### Added
+- Plain text and PNG image downloads
+
 ## [1.0.5] - 2024-04-13
 ### Fixed
 - Data saving and recovery

diff --git a/README.md b/README.md
@@ -31,8 +31,8 @@ Carrot    | 3| 3.00
 
 |Control|Description|
 |---|---|
-|![open](resource/open.png)|Open receipt markdown (\*.receipt, \*.text)|
-|![download](resource/download.png)|Download receipt markdown (\*.receipt) or SVG image (\*.svg)|
+|![open](resource/open.png)|Open receipt markdown (\*.receipt, \*.txt)|
+|![download](resource/download.png)|Download receipt markdown (\*.receipt), plain text (\*.txt), SVG image (\*.svg), or PNG image (\*.png)|
 |![print](resource/print.png)|Print receipt markdown|
 |![option](resource/option.png)|Set print options|
 

diff --git a/index.html b/index.html
@@ -339,11 +339,17 @@
         <div id="savecancel"></div>
         <div id="savebox">
             <div>Download</div>
-            <input type="radio" id="savetext" name="savetype" value="text" checked>
-            <label for="savetext">Markdown Text</label>
+            <input type="radio" id="savereceipt" name="savetype" value="receipt" checked>
+            <label for="savereceipt">Markdown Text</label>
+            <br>
+            <input type="radio" id="savetxt" name="savetype" value="txt">
+            <label for="savetxt">Plain Text</label>
             <br>
             <input type="radio" id="savesvg" name="savetype" value="svg">
             <label for="savesvg">SVG Image</label>
+            <br>
+            <input type="radio" id="savepng" name="savetype" value="png">
+            <label for="savepng">PNG Image</label>
             <hr>
             <div>
                 <button id="saveok">OK</button>
@@ -559,6 +565,6 @@
             </div>
         </div>
     </div>
-    <footer>Receipt.js Designer Version 1.0.5 © 2024 Open Foodservice System Consortium</footer>
+    <footer>Receipt.js Designer Version 1.1.0 © 2024 Open Foodservice System Consortium</footer>
 </body>
 </html>
diff --git a/script/designer.js b/script/designer.js
@@ -24,8 +24,10 @@ function initialize() {
     const save = document.getElementById('save');
     const savedialog = document.getElementById('savedialog');
     const savebox = document.getElementById('savebox');
-    const savetext = document.getElementById('savetext');
+    const savereceipt = document.getElementById('savereceipt');
+    const savetxt = document.getElementById('savetxt');
     const savesvg = document.getElementById('savesvg');
+    const savepng = document.getElementById('savepng');
     const saveok = document.getElementById('saveok');
     const savecancel = document.getElementById('savecancel');
     const prn = document.getElementById('prn');
@@ -244,26 +246,45 @@ function initialize() {
     // register save ok event listener
     saveok.onclick = event => {
         const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
-        // save text file
-        if (savetext.checked) {
+        // save receipt file
+        if (savereceipt.checked) {
             const a = document.createElement('a');
             a.href = window.URL.createObjectURL(new Blob([ bom, edit.value ], { type: 'text/plain' }));
             a.download = 'markdown.receipt';
             a.click();
         }
+        let param = `-l ${lang.value} -c ${cpl.textContent}`;
+        if (!linespace.checked) {
+            param += ' -s';
+        }
+        // save txt file
+        if (savetxt.checked) {
+            Receipt.from(edit.value, param).toText().then(txt => {
+                const a = document.createElement('a');
+                a.href = window.URL.createObjectURL(new Blob([ bom, txt ], { type: 'text/plain' }));
+                a.download = 'markdown.txt';
+                a.click();
+            });
+        }
         // save svg file
         if (savesvg.checked) {
-                let param = `-l ${lang.value} -c ${cpl.textContent}`;
-                if (!linespace.checked) {
-                    param += ' -s';
-                }
-                Receipt.from(edit.value, param).toSVG().then(svg => {
+            Receipt.from(edit.value, param).toSVG().then(svg => {
                 const a = document.createElement('a');
                 a.href = window.URL.createObjectURL(new Blob([ bom, svg ], { type: 'image/svg+xml' }));
                 a.download = 'markdown.svg';
                 a.click();
             });
         }
+        // save png file
+        if (savepng.checked) {
+            Receipt.from(edit.value, param).toPNG().then(png => {
+                const bin = Uint8Array.from(atob(png.replace(/^data:image\/png;base64,/, '')), c => c.charCodeAt(0));
+                const a = document.createElement('a');
+                a.href = window.URL.createObjectURL(new Blob([ bin ], { type: 'image/png' }));
+                a.download = 'markdown.png';
+                a.click();
+            });
+        }
         // close the dialog box
         savedialog.style.display = 'none';
     };
@@ -384,7 +405,7 @@ function initialize() {
                     imgview.getContext('2d').drawImage(im, 0, 0);
                 };
                 im.src = reader.result;
-                image = reader.result.replace(/^data:image\/png;base64,(.*)$/, '$1');
+                image = reader.result.replace(/^data:image\/png;base64,/, '');
             };
             reader.readAsDataURL(file);
         }