added a copy png button

Author: Mole1424

static/js/publicity.js

@@ -87,4 +87,48 @@ document.addEventListener("DOMContentLoaded", () => {
         };
         img.src = url;
     });
+
+    const copyPng = document.getElementById("copy-png");
+    copyPng.addEventListener("click", function (event) {
+        // get svg element
+        const svgElement = document.getElementById("svg-container").querySelector("svg");
+        if (!svgElement) {
+            alert("No SVG found to convert to PNG.");
+            return;
+        }
+        // serialise svg to string
+        const svgData = new XMLSerializer().serializeToString(svgElement);
+        const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(svgBlob);
+        // create image element to load svg
+        const img = new Image();
+        img.onload = function () {
+            // create canvas to draw image
+            const canvas = document.createElement("canvas");
+            canvas.width = 2028;
+            canvas.height = 2028;
+            // draw image to canvas
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            // convert canvas to blob
+            canvas.toBlob(function (blob) {
+                // copy to clipboard
+                const item = new ClipboardItem({ "image/png": blob });
+                navigator.clipboard.write([item]).then(() => {
+                    // show success state
+                    copyPng.classList.remove("btn-outline-secondary");
+                    copyPng.classList.add("btn-success");
+                    copyPng.innerHTML = "<i class='ph-bold ph-check'></i> Copied";
+                    // revert after 2 seconds
+                    setTimeout(() => {
+                        copyPng.classList.remove("btn-success");
+                        copyPng.classList.add("btn-outline-secondary");
+                        copyPng.innerHTML = "Copy PNG";
+                    }, 2000);
+                });
+                URL.revokeObjectURL(url);
+            }, "image/png");
+        };
+        img.src = url;
+    });
 });

templates/exec/publicity.html

@@ -38,6 +38,7 @@ <h1><i class="ph-bold ph-instagram-logo"></i> Exec Publicity</h1>
 
                 <div class="mt-3 d-flex gap-2" id="publicity-form">
                     <button id="copy-svg" class="btn btn-outline-primary">Copy SVG</button>
+                    <button id="copy-png" class="btn btn-outline-secondary">Copy PNG</button>
                     <button id="save-png" class="btn btn-outline-success">Save PNG</button>
                 </div>
             </div>