From 13400306ca251b3f61fe6be1b236b16d64ba1db7 Mon Sep 17 00:00:00 2001
From: tilcreator <tilcreator@tc-j.de>
Date: Thu, 10 Mar 2022 17:08:36 +0100
Subject: [PATCH] Fixup img to svg change
---
src/index.html | 44 ++++++++++++++++++--------------------------
1 file changed, 18 insertions(+), 26 deletions(-)
diff --git a/src/index.html b/src/index.html
index 3e551b4..8fcfaba 100644
--- a/src/index.html
+++ b/src/index.html
@@ -80,14 +80,10 @@
padding: 0px calc(50% - 20px);
margin-left: 10px;
}
- #preview_big, #preview_small {
+ #preview_big, #preview_small, #preview_big > svg, #preview_small > svg {
display: block;
width: 100%;
- /* TODO this is eyeballed and might not work for all
- / screen / font sizes; unfortunately svg-element's dont
- / resize to content automatically (and I'm not sure if
- / they can) */
- height: 30em;
+ height: auto;
}
@media screen and (prefers-color-scheme: light) {
body {
@@ -103,14 +99,12 @@
</style>
<script>
onhtmlload = () => {
- svg_big_template = new DOMParser().parseFromString(atob("@SVG_BIG_TEMPLATE@"), "image/svg+xml").querySelector("svg");
- svg_small_template = new DOMParser().parseFromString(atob("@SVG_SMALL_TEMPLATE@"), "image/svg+xml").querySelector("svg");
+ svg_big = new DOMParser().parseFromString(atob("@SVG_BIG_TEMPLATE@"), "image/svg+xml").querySelector("svg");
+ svg_small = new DOMParser().parseFromString(atob("@SVG_SMALL_TEMPLATE@"), "image/svg+xml").querySelector("svg");
svg_big_png_width = 2048;
svg_small_png_width = 512;
- svg_big = svg_big_template.cloneNode(true);
- svg_small = svg_small_template.cloneNode(true);
file_name_prefix = "DiVOC-BB3_DiVOC_ブリッジ・バブルス_bunny_";
// Base64 encoder which supports unicode
@@ -160,10 +154,10 @@
setTimeout(() => URL.revokeObjectURL(a.href), 60000);
}
- svg2png = (svg_data, width, height) => {
+ svg2png_promise = (svg_data, width, height) => {
+ return new Promise(resolve => {
image = new Image();
- image.src = "data:image/svg+xml;base64," + btoaUnicode(new XMLSerializer().serializeToString(svg_data));
-
+ image.onload = () => {
if (height === null) {
height = (image.height / image.width) * width;
}
@@ -174,15 +168,13 @@
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
- return dataURItoBlob(canvas.toDataURL("image/png"));
+ resolve(dataURItoBlob(canvas.toDataURL("image/png")));
+ }
+ image.src = "data:image/svg+xml;base64," + btoaUnicode(new XMLSerializer().serializeToString(svg_data));
+ })
}
update_logo = () => {
- // don't copy this each time
- // (unfortunately we're not in a lazy language … *sigh*)
- svg_big = svg_big_template //.cloneNode(true);
- svg_small = svg_small_template //.cloneNode(true);
-
// Collect all options
animal_selected = document.querySelector('#selector_animal input[name=animal]:checked').value;
headline_text = document.querySelector('#headline_text').value;
@@ -217,7 +209,7 @@
// don't replace the entire svg each time, just add it once as svg, then
// mutate it in place; that way the browser can just ignore the font blob
// after it's been loaded once
- document.querySelector("#preview_big").appendChild (svg_big);
+ document.querySelector("#preview_big").appendChild(svg_big);
document.querySelector("#preview_small").appendChild(svg_small);
// Add a event listener to every input event
@@ -263,14 +255,14 @@
document.querySelector("#download_big_svg").addEventListener("click", (event) => {
download_string(new XMLSerializer().serializeToString(svg_big), "image/svg+xml", file_name_prefix + "big.svg");
});
- document.querySelector("#download_big_png").addEventListener("click", (event) => {
- download_blob(svg2png(svg_big, svg_big_png_width, null), "image/png", file_name_prefix + "big.png");
+ document.querySelector("#download_big_png").addEventListener("click", async (event) => {
+ download_blob(await svg2png_promise(svg_big, svg_big_png_width, null), "image/png", file_name_prefix + "big.png");
});
document.querySelector("#download_small_svg").addEventListener("click", (event) => {
download_string(new XMLSerializer().serializeToString(svg_small), "image/svg+xml", file_name_prefix + "small.svg");
});
- document.querySelector("#download_small_png").addEventListener("click", (event) => {
- download_blob(svg2png(svg_small, svg_small_png_width, null), "image/png", file_name_prefix + "small.png");
+ document.querySelector("#download_small_png").addEventListener("click", async (event) => {
+ download_blob(await svg2png_promise(svg_small, svg_small_png_width, null), "image/png", file_name_prefix + "small.png");
});
}
</script>
@@ -283,13 +275,13 @@
<h2>big</h2>
<button id="download_big_svg">Save big SVG</button>
<button id="download_big_png">Save big PNG</button>
- <svg id="preview_big"/>
+ <div id="preview_big"></div>
</div>
<div>
<h2>small</h2>
<button id="download_small_svg">Save small SVG</button>
<button id="download_small_png">Save small PNG</button>
- <svg id="preview_small"/>
+ <div id="preview_small"></div>
</div>
</div>
<h2>Alt text</h2>
--
GitLab