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

Run prettier
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-03-03 16:46:05 +01:00
commit 155d47222e
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
Download patch file Download diff file Expand all files Collapse all files

122
styleguide/assets/script/generator.js
View file

@ -1,90 +1,92 @@
let can = document.createElement("canvas");
let ctx = can.getContext('2d');
let ctx = can.getContext("2d");
let result;
const downloadButton = document.querySelector('#download');
const downloadButton = document.querySelector("#download");
function filterImage(svgDataUrl, width, height) {
const filteredImage = new Image();
const resultPreview = document.querySelector('#result_img')
const filteredImage = new Image();
const resultPreview = document.querySelector("#result_img");
can.width = width;
can.height = height;
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;
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;
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;
sourceImage.onload = function () {
let svgWidth = this.width;
let svgHeight = this.height;
if (this.height > 1000) {
svgHeight = 1000;
svgWidth = 1000 * this.width / this.height;
}
if (this.height > 1000) {
svgHeight = 1000;
svgWidth = (1000 * this.width) / this.height;
}
svg.setAttribute("height", svgHeight);
svg.setAttribute("width", svgWidth);
svg.setAttribute("height", svgHeight);
svg.setAttribute("width", svgWidth);
let svgString = (new XMLSerializer).serializeToString(svg);
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
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;
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 files = e.target.files;
if (!files || !files.length) return;
const file = files[0];
if (!file.type.match("image.*")) return;
const reader = new FileReader();
const reader = new FileReader();
reader.onload = (readerEvent) => {
loadImage(readerEvent.target.result);
};
reader.onload = (readerEvent) => {
loadImage(readerEvent.target.result);
};
reader.readAsDataURL(file);
reader.readAsDataURL(file);
}
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
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;
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);
downloadButton.addEventListener("click", downloadURI);
(async () => {
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
.then(r => r.blob());
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg").then(
(r) => r.blob(),
);
let dataUrl = await new Promise(resolve => {
let reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsDataURL(exampleImageBlob);
});
let dataUrl = await new Promise((resolve) => {
let reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsDataURL(exampleImageBlob);
});
loadImage(dataUrl);
})()
loadImage(dataUrl);
})();