backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-23 12:31:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fonts rework - add fonts to downloaded image

Browse source
This commit is contained in:
Azgaar 2021-09-07 00:19:31 +03:00
parent 7a844f8810
commit 2492cad3e0
3 changed files with 40 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

59
modules/fonts.js
View file

@ -197,43 +197,24 @@ async function fetchGoogleFont(family) {
} }
} }
function convertFontToDataURI(url) { function readBlobAsDataURL(blob) {
if (!url) return Promise.resolve(); return new Promise(function (resolve, reject) {
return fetch(url) const reader = new FileReader();
.then(resp => resp.text()) reader.onloadend = () => resolve(reader.result);
.then(text => { reader.onerror = reject;
const style = document.createElement("style"); reader.readAsDataURL(blob);
style.innerHTML = text; });
document.head.appendChild(style); }
const styleSheet = document.styleSheets.find(sheet => sheet.ownerNode === style); async function loadFontsAsDataURI(fonts) {
const promises = fonts.map(async font => {
const FontRule = rule => { const url = font.src.match(/url\(['"]?(.+?)['"]?\)/)[1];
const src = rule.style.getPropertyValue("src"); const resp = await fetch(url);
const url = src ? src.split("url(")[1].split(")")[0] : ""; const blob = await resp.blob();
return {rule, src, url: url.substring(url.length - 1, 1)}; const dataURL = await readBlobAsDataURL(blob);
};
const fontProms = []; return {...font, src: `url('${dataURL}')`};
});
for (const rule of styleSheet.cssRules) {
let fR = FontRule(rule); return await Promise.all(promises);
if (!fR.url) continue;
fontProms.push(
fetch(fR.url)
.then(resp => resp.blob())
.then(blob => {
return new Promise(resolve => {
let f = new FileReader();
f.onload = e => resolve(f.result);
f.readAsDataURL(blob);
});
})
.then(dataURL => fR.rule.cssText.replace(fR.url, dataURL))
);
}
document.head.removeChild(style); // clean up
return Promise.all(fontProms); // wait for all this has been done
});
} }

18
modules/save.js
View file

@ -277,12 +277,20 @@ async function getMapURL(type, options = {}) {
// TODO: add dataURL for all used fonts // TODO: add dataURL for all used fonts
const usedFonts = getUsedFonts(cloneEl); const usedFonts = getUsedFonts(cloneEl);
const websafe = ["Georgia", "Times+New+Roman", "Comic+Sans+MS", "Lucida+Sans+Unicode", "Courier+New", "Verdana", "Arial", "Impact"]; const fontsToLoad = usedFonts.filter(font => font.src);
const fontsToLoad = usedFonts.filter(font => !websafe.includes(font));
if (fontsToLoad.length) { if (fontsToLoad.length) {
const url = "https://fonts.googleapis.com/css?family=" + fontsToLoad.join("|"); const dataURLfonts = await loadFontsAsDataURI(fontsToLoad);
const fontStyle = await convertFontToDataURI(url);
if (fontStyle) clone.select("defs").append("style").text(fontStyle.join("\n")); const fontFaces = dataURLfonts
.map(({family, src, unicodeRange = "", variant = "normal"}) => {
return `@font-face {font-family: "${family}"; src: ${src}; unicode-range: ${unicodeRange}; font-variant: ${variant};}`;
})
.join("\n");
const style = document.createElement("style");
style.setAttribute("type", "text/css");
style.innerHTML = fontFaces;
cloneEl.querySelector("defs").appendChild(style);
} }
clone.remove(); clone.remove();

9
modules/ui/general.js
View file

@ -32,15 +32,20 @@ function tip(tip = "Tip is undefined", main, type, time) {
else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)"; else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)"; else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
if (main) tooltip.dataset.main = tip; // set main tip if (main) {
if (time) setTimeout(() => (tooltip.dataset.main = ""), time); // clear main in some time tooltip.dataset.main = tip;
tooltip.dataset.color = tooltip.style.background;
}
if (time) setTimeout(() => clearMainTip(), time);
} }
function showMainTip() { function showMainTip() {
tooltip.style.background = tooltip.dataset.color;
tooltip.innerHTML = tooltip.dataset.main; tooltip.innerHTML = tooltip.dataset.main;
} }
function clearMainTip() { function clearMainTip() {
tooltip.dataset.color = "";
tooltip.dataset.main = ""; tooltip.dataset.main = "";
tooltip.innerHTML = ""; tooltip.innerHTML = "";
} }