Add a button to download an image of the current scene

macrovision.html

@@ -64,9 +64,12 @@
       <i class="fas fa-bars"></i>
     </button>
     <span class="menubar-group">
-      <button id="screenshot">
+      <button id="copy-screenshot">
         <i class="fas fa-camera"></i>
       </button>
+      <button id="save-screenshot">
+        <i class="fas fa-download"></i>
+      </button>
     </span>
     <span class="menubar-group" id="spawners">
 

macrovision.js

@@ -1365,10 +1365,14 @@ document.addEventListener("DOMContentLoaded", () => {
     prepareMenu();
     prepareEntities();
 
-    document.querySelector("#screenshot").addEventListener("click", e => {
+    document.querySelector("#copy-screenshot").addEventListener("click", e => {
         copyScreenshot();
         toast("Copied to clipboard!");
     });
+
+    document.querySelector("#save-screenshot").addEventListener("click", e => {
+        saveScreenshot();
+    });
     document.querySelector("#toggle-menu").addEventListener("click", e => {
         const popoutMenu = document.querySelector("#popout-menu");
         if (popoutMenu.classList.contains("visible")) {
@@ -2309,7 +2313,7 @@ function exportCanvas(callback) {
     const blob = ctx.canvas.toBlob(callback);
 }
 
-function copyScreenshot() {
+function generateScreenshot(callback) {
     renderToCanvas();
 
     /** @type {CanvasRenderingContext2D} */
@@ -2318,7 +2322,14 @@ function copyScreenshot() {
     ctx.fillStyle = "#555";
     ctx.font = "normal normal lighter 16pt coda";
     ctx.fillText("macrovision.crux.sexy", 10, 25);
+    
     exportCanvas(blob => {
+        callback(blob);
+    });   
+}
+
+function copyScreenshot() {
+    generateScreenshot(blob => {
         navigator.clipboard.write([
             new ClipboardItem({
                 "image/png": blob
@@ -2328,6 +2339,16 @@ function copyScreenshot() {
     drawScale(false);
 }
 
+function saveScreenshot() {
+    generateScreenshot(blob => {
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.setAttribute("download", "macrovision.png");
+        a.click();
+    });   
+    drawScale(false);
+}
+
 function toast(msg) {
     div = document.createElement("div");
     div.innerHTML = msg;