jlengrand/briques-poster
1
0
Fork 0
mirror of https://github.com/les-briques-du-web/briques-poster.git synced 2026-03-10 08:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

'Generate' button

Browse Source
This commit is contained in:
Horacio Gonzalez
2021-05-04 17:20:36 +02:00
parent 8c4c9079ec
commit 8389b88fb2
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -201,14 +201,30 @@
}
.generation {
padding: 2rem;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
font-family : KOMTXTT_;
}
.generate {
width: 500px;
font-size: 5rem;
color: white;
background-color: #800000;
border-radius: 10px;
margin-bottom: 3rem;
cursor: pointer;
font-family : KOMTXTT_;
}
.generating {
font-size: 5rem;
color: #aaa;
margin-left: 5rem;
display: none;
}
.spacer {
@@ -220,7 +236,10 @@
</head>
<body>
<button class="generate" onclick="generatePng()">Generate</button>
<div class="generation">
<button class="generate" onclick="generatePng()">Generate</button>
<div class="generating">Generating...</div>
</div>
<briques-poster id="poster"></briques-poster>
<div class="spacer"></div>
@@ -230,12 +249,14 @@
<script>
let generatePng = () => {
console.log('Generating...');
document.querySelector(".generating").style.display = "block";
domtoimage.toPng(document.querySelector("#poster"))
// @ts-ignore 😬
.then((dataUrl) => {
const img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
document.querySelector(".generating").style.display = "none";
})
// @ts-ignore 😬
.catch((error) => {