78 lines
No EOL
3 KiB
HTML
78 lines
No EOL
3 KiB
HTML
<!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="objectBoundingBox">
|
|
<feColorMatrix in="SourceGraphic" 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="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
|
<feComponentTransfer in="pink_edges" result="pink">
|
|
<feFuncR type="table" tableValues="0.7765 0" />
|
|
<feFuncG type="table" tableValues="0.1451 0" />
|
|
<feFuncB type="table" tableValues="0.4902 0" />
|
|
</feComponentTransfer>
|
|
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
|
|
|
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
|
<feComponentTransfer in="cyan_edges" result="cyan">
|
|
<feFuncR type="table" tableValues="0.2941 0" />
|
|
<feFuncG type="table" tableValues="0.6784 0" />
|
|
<feFuncB type="table" tableValues="0.8471 0" />
|
|
</feComponentTransfer>
|
|
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
|
|
|
<feMerge result="pink_cyan_shift">
|
|
<feMergeNode in="SourceGraphic" />
|
|
<feMergeNode in="pink_shift" />
|
|
<feMergeNode in="cyan_shift" />
|
|
</feMerge>
|
|
|
|
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
|
|
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
|
|
<feOffset in="distorted_raw" result="distorted" />
|
|
</filter>
|
|
|
|
<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> |