EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styleguide: move scripts, add mobile navigation, style generator
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-14 23:06:36 +01:00
commit fa75654b11
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
16 changed files with 390 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

77
styleguide/generator/generator.js
View file

@ -1,77 +0,0 @@
let can = document.createElement("canvas");
let ctx = can.getContext('2d');
let result;
const downloadButton = document.querySelector('#download');
function filterImage(svgDataUrl, width, height) {
const filteredImage = new Image();
const resultPreview = document.querySelector('#result_img')
can.width = width;
can.height = height;
filteredImage.onload = function () {
ctx.drawImage(filteredImage, 0, 0, width, height);
result = can.toDataURL();
downloadButton.disabled = false;
resultPreview.src = result;
};
filteredImage.src = svgDataUrl;
}
function loadImage(base64Image) {
const sourceImage = new Image();
const svg = document.querySelector('svg')
const svgImage = svg.querySelector('image')
const sourcePreview = document.querySelector('#source_img')
let svgDataUrl;
sourceImage.onload = function () {
let svgWidth = this.width;
let svgHeight = this.height;
if (this.height > 1000) {
svgHeight = 1000;
svgWidth = 1000 * this.width / this.height;
}
svg.setAttribute("height", svgHeight);
svg.setAttribute("width", svgWidth);
let svgString = (new XMLSerializer).serializeToString(svg);
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
filterImage(svgDataUrl, this.width, this.height);
};
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
}
function handleFileSelect(e) {
const files = e.target.files;
if (!files || !files.length) return;
const file = files[0];
if (!file.type.match('image.*')) return;
const reader = new FileReader();
reader.onload = (readerEvent) => {
loadImage(readerEvent.target.result);
};
reader.readAsDataURL(file);
}
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
function downloadURI(_uri, _name) {
let link = document.createElement("a");
link.download = 'distortedImageEH22.png';
link.href = result;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
downloadButton.addEventListener('click', downloadURI);