patek/patek.cz
9
0
Fork 0
Code Issues 4 Pull Requests 2 Packages Projects Releases Wiki Activity

Merge branch 'gs/logo-generator-png' into 'master'

Browse Source 
Added PNG generation to logo generator.

See merge request patek-devs/patek.cz!15
This commit is contained in:
Greenscreener 2020-05-01 15:54:38 +00:00
commit a4fada34fb
2 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
themes/patek/assets/css/logo-generator.scss
View File

@ -31,3 +31,6 @@
margin-left: -5px;
margin-right: 5px;
}
.label.narrowLabel {
padding-right: .5em;
}

55
themes/patek/layouts/shortcodes/logo-generator.html
View File

@ -20,10 +20,15 @@
<div class="navbar">
<div class="navbar-start" id="outputs">
<span class="navbar-item"><button class="button is-primary" onclick="downloadSvg()"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="#fff" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg> Download SVG</button></span>
<span class="navbar-item"><button class="button is-primary" onclick="downloadPng(document.getElementById('widthip').value)"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> Download PNG</button></span>
<span class="navbar-item"><label for="widthip" class="label narrowLabel">PNG Width: </label><input type="number" value="1000" class="input" style="width: 5em;" id="widthip"></span>
</div>
</div>
</div>
</div>
<canvas id="canvas" width="1" height="1" style="display: none">
</canvas>
<script type="text/javascript">
const svgTemplate = document.createElement("template");
svgTemplate.innerHTML = `
@ -64,6 +69,47 @@
});
});
function downloadSvg () {
const svg = generateSvg();
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
a.download = "patek-logo.svg";
a.style.display = "none";
document.body.append(a);
a.click();
document.body.removeChild(a);
}
function downloadPng(width) {
const svg = generateSvg();
const patekLogo = document.getElementById("patek-logo");
const renderedWidth = patekLogo.clientWidth;
const renderedHeight = patekLogo.clientHeight;
svg.querySelector("svg").setAttribute("width", width.toString());
svg.querySelector("svg").setAttribute("height", ((renderedHeight/renderedWidth)*width).toString());
const canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = (renderedHeight/renderedWidth)*width;
const img = new Image();
const ctx = canvas.getContext("2d");
const url = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
img.src = url;
img.width = 100;
img.height = 100;
img.addEventListener("load", () => {
ctx.drawImage(img, 0, 0);
const png = canvas.toDataURL("image/png");
const a = document.createElement('a');
a.href = png;
a.download = "patek-logo.png";
a.style.display = "none";
document.body.append(a);
a.click();
document.body.removeChild(a);
});
}
function generateSvg() {
const svg = svgTemplate.content.cloneNode(true);
const patekLogo = document.getElementById("patek-logo");
const binary = PatekLogo.calculateBinary(document.getElementById("titip").value || "Pátek");
@ -96,14 +142,7 @@
svg.querySelector("#content").setAttribute("transform", `translate(${offsetX},${offsetY})`);
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
a.download = "patek-logo.svg";
a.style.display = "none";
document.body.append(a);
a.click();
document.body.removeChild(a);
return svg;
}
function swapColors() {
const fg = document.getElementById("fgip");