diff --git a/macrovision.html b/macrovision.html index 1528b484..9a6016c0 100644 --- a/macrovision.html +++ b/macrovision.html @@ -64,9 +64,12 @@ - + diff --git a/macrovision.js b/macrovision.js index d2de4967..a80d78be 100644 --- a/macrovision.js +++ b/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;