add generator draft
This commit is contained in:
parent
8b1e481341
commit
6b3d75fdc6
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
2 changed files with 145 additions and 0 deletions
67
styleguide/generator/generator.js
Normal file
67
styleguide/generator/generator.js
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
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 () {
|
||||||
|
filterImage(svgDataUrl, this.width, this.height);
|
||||||
|
};
|
||||||
|
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
||||||
|
|
||||||
|
|
||||||
|
let svgString = (new XMLSerializer).serializeToString(svg);
|
||||||
|
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
78
styleguide/generator/index.html
Normal file
78
styleguide/generator/index.html
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body style="height: 100vh;">
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input id="file_input" type="file" name="image" accept="image/*">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img id="source_img" src=""
|
||||||
|
style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;"/>
|
||||||
|
<img id="result_img" src=""
|
||||||
|
style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;"/>
|
||||||
|
|
||||||
|
<div style="display: none;">
|
||||||
|
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||||
|
primitiveUnits="userSpaceOnUse">
|
||||||
|
<feTurbulence type="turbulence" baseFrequency="0 0.1" numOctaves="1" result="noise"/>
|
||||||
|
<feDisplacementMap in="SourceGraphic" in2="noise" result="distorted" scale="20"/>
|
||||||
|
<feColorMatrix in="distorted" type="saturate" values="0" result="bw"/>
|
||||||
|
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa"/>
|
||||||
|
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||||
|
<feFuncA type="table" tableValues="0 1"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
<feConvolveMatrix
|
||||||
|
in="ltoa_inverse"
|
||||||
|
result="edges"
|
||||||
|
kernelMatrix="-2 0 -2
|
||||||
|
0 0 0
|
||||||
|
2 0 2"/>
|
||||||
|
|
||||||
|
<feComponentTransfer in="edges" result="pink">
|
||||||
|
<feFuncR type="table" tableValues="1 0"/>
|
||||||
|
<feFuncG type="table" tableValues="0 1"/>
|
||||||
|
<feFuncB type="table" tableValues="0.1 0"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
<feOffset in="pink" result="pink_shift" dx="-4" dy="0"/>
|
||||||
|
|
||||||
|
<feComponentTransfer in="edges" result="cyan">
|
||||||
|
<feFuncR type="table" tableValues="0.1 0"/>
|
||||||
|
<feFuncG type="table" tableValues="1 0"/>
|
||||||
|
<feFuncB type="table" tableValues="1 0"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
<feOffset in="cyan" result="cyan_shift" dx="4" dy="0"/>
|
||||||
|
|
||||||
|
<feMerge result="pink_cyan_shift">
|
||||||
|
<feMergeNode in="distorted"/>
|
||||||
|
<feMergeNode in="pink_shift"/>
|
||||||
|
<feMergeNode in="cyan_shift"/>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<rect fill="#000000" width="100%" height="100%"/>
|
||||||
|
<g filter="url(#filter0)">
|
||||||
|
<image href="" width="100%" height="100%"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button id="download" disabled>
|
||||||
|
Download Result
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="generator.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue