[2.3.0] Adds Support For Exporting as PNG

malulleybovo · Apr 15, 2022 · df4e576 · df4e576
1 parent 9b88d92
commit df4e576
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
   Pseudo-vector image creator.
 
   ## [Launch Application](https://malulleybovo.github.io/SymbolArtEditorOnline/)
-  #### Version 2.2.0
+  #### Version 2.3.0
 
   ### Quickly get down to business and make art with fluidity and agility.
   <br>Symbol Art Editor was designed based on three pillars: simplicity, ease of use, and agility.

diff --git a/res/templates/optionsview.html b/res/templates/optionsview.html
@@ -1,6 +1,6 @@
 <div class="disable-select" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.95;background: #3c3c3c;z-index: 1000;transition: all 0.25s ease-in-out 0s;" oncontextmenu="return false;">
 
-    <div style="position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);color: #808080;font-size: 12px;text-align: center;">v2.2.0<br />&copy; 2021 Copyright malulleybovo</div>
+    <div style="position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);color: #808080;font-size: 12px;text-align: center;">v2.3.0<br />&copy; 2021 Copyright malulleybovo</div>
 
     <div style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 720px;font-weight: bold;min-width: 360px;text-align: center;">
 
@@ -26,6 +26,12 @@ <h3>Options</h3>
         </div>
         <div style="text-align: right;font-size: 10px;margin-top: 6px;">USED TO SAVE THIS PROJECT</div>
 
+        <div style="display: grid;grid-template-columns: 60% 40%;margin-top: 12px;">
+            <div style="text-align: right;padding: 5px 10px 5px 0px;">S.A. SCREENSHOT</div>
+            <div id="pngexportbutton" style="padding: 5px 0px 5px 0px;background: white;color: #3c3c3c;border-radius: 12px;">EXPORT</div>
+        </div>
+        <div style="text-align: right;font-size: 10px;margin-top: 6px;">S.A. IN PNG FORMAT</div>
+
         <div style="display: grid;grid-template-columns: 60% 40%;margin-top: 12px;">
             <div style="text-align: right;padding: 5px 10px 5px 0px;">S.A. COMPONENT</div>
             <div id="importascomponentbutton" style="padding: 5px 0px 5px 0px;background: white;color: #3c3c3c;border-radius: 12px;">INCLUDE</div>

diff --git a/src/UIApplication.js b/src/UIApplication.js
@@ -312,4 +312,11 @@ class UIApplication {
         document.body.appendChild(this._renderer.domElement);
     }
 
+    async imageBlob() {
+        let pngData = await this._renderer.pngData();
+        let stream = await fetch(pngData);
+        let blob = await stream.blob();
+        return blob;
+    }
+
 }
diff --git a/src/view/UIOptionsView.js b/src/view/UIOptionsView.js
@@ -125,6 +125,18 @@ class UIOptionsView extends UIView {
         });
     })();
 
+    _pngExportButton = (() => {
+        this.didLoad(_ => {
+            this._pngExportButton = this.view.find('#pngexportbutton');
+            this.updateState();
+            this._pngExportButton.gestureRecognizer = new UITapGestureRecognizer({
+                targetHtmlElement: this._pngExportButton[0], onTap: () => {
+                    this._requestToExportAsPng();
+                }
+            });
+        });
+    })();
+
     _importAsComponentButton = (() => {
         this.didLoad(_ => {
             this._importAsComponentButton = this.view.find('#importascomponentbutton');
@@ -326,4 +338,14 @@ class UIOptionsView extends UIView {
         link[0].click();
     }
 
+    _requestToExportAsPng() {
+        UIApplication.shared.imageBlob().then(blob => {
+            let fileUrl = URL.createObjectURL(blob);
+            let link = $('<a>');
+            link[0].href = fileUrl;
+            link[0].download = 'symbolArtPreview.png';
+            link[0].click();
+        });
+    }
+
 }
diff --git a/src/view/renderer/Renderer.js b/src/view/renderer/Renderer.js
@@ -813,4 +813,44 @@ class Renderer {
         }
     }
 
+    async pngData() {
+        return new Promise((resolve, reject) => {
+            this._previewSymbolArtDelimiter.outlineMaterial.visible = false;
+            try {
+                let width = SymbolArt.viewableDimensions.width;
+                let height = SymbolArt.viewableDimensions.height;
+                if (width > height && width > window.innerWidth) {
+                    height = height * window.innerWidth / width;
+                    width = window.innerWidth;
+                } else if (width < height && height > window.innerHeight) {
+                    width = width * window.innerHeight / height;
+                    height = window.innerHeight;
+                }
+                this._engine.clear();
+                this._engine.setViewport(0, window.innerHeight - height, width, height);
+                this._engine.setScissor(0, window.innerHeight - height, width, height);
+                this._engine.render(this._scene, this._previewCamera);
+                let snapshot = this._engine.domElement.toDataURL();
+                let previewImage = new Image();
+                previewImage.crossOrigin = 'anonymous';
+                previewImage.onload = async _ => {
+                    let previewCanvas = document.createElement('canvas');
+                    let context = previewCanvas.getContext('2d');
+                    previewCanvas.width = width;
+                    previewCanvas.height = height;
+                    context.drawImage(previewImage, 0, 0, width, height, 0, 0, width, height);
+                    let pngData = previewCanvas.toDataURL();
+                    resolve(pngData);
+                };
+                previewImage.onerror = _ => {
+                    reject();
+                }
+                previewImage.src = snapshot;
+            } catch (e) {
+                this._previewSymbolArtDelimiter.outlineMaterial.visible = true;
+                reject();
+            }
+        });
+    }
+
 }