vilmibm
/
blackout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

support image download

trunk
vilmibm 2023-08-04 01:49:34 +00:00
parent a12b1febe0
commit 7a2ad27484
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/index.tmpl
View File

@ -64,6 +64,8 @@
#paper span { #paper span {
cursor: help; cursor: help;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
} }
@media (max-width:400px) { @media (max-width:400px) {
@ -77,10 +79,14 @@
@media (hover: hover) { @media (hover: hover) {
#paper span:hover { #paper span:hover {
background-color: white; background-color: white;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
} }
#paper span.black:hover { #paper span.black:hover {
background-color: grey; background-color: grey;
/* hack for the image download. without this, thin white artifacting at span margins */
margin-left:-1px;
} }
} }
@ -119,9 +125,7 @@
<center> <center>
<p> <p>
<button id="copyText">copy text to clipboard</button> <button id="copyText">copy text to clipboard</button>
</p> <button id="downloadImage">download as image</button>
<p>
<button id="copyImage" class="hidden">copy image to clipboard</button>
</p> </p>
<p> <p>
<a id="aboutToggle" href="">ABOUT</a> <a id="aboutToggle" href="">ABOUT</a>
@ -167,16 +171,25 @@
document.querySelector("#about").classList.toggle("hidden"); document.querySelector("#about").classList.toggle("hidden");
} }
const downloadImgButton = document.querySelector("#downloadImage");
const copyImgButton = document.querySelector("#copyImage"); downloadImgButton.addEventListener("animationend", () => downloadImgButton.classList.remove("rainbow"), false);
copyImgButton.addEventListener("animationend", () => copyImgButton.classList.remove("rainbow"), false); downloadImgButton.addEventListener("click", () => {
copyImgButton.addEventListener("click", () => {
html2canvas(document.querySelector("#paper")).then((canvas) => { html2canvas(document.querySelector("#paper")).then((canvas) => {
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
/*
// can't use this because ff doesn't have support by default for clipboard.write()
let data = [new ClipboardItem({ [blob.type]: blob })]; let data = [new ClipboardItem({ [blob.type]: blob })];
navigator.clipboard.write(data).then(() => { navigator.clipboard.write(data).then(() => {
copyImgButton.classList.add("rainbow"); copyImgButton.classList.add("rainbow");
}, console.log); }, console.log);
*/
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = "blackout.png";
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(downloadUrl);
}); });
}); });
}); });