sander/spiegel-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

demo

Browse source
This commit is contained in:
Shautvast 2024-04-10 17:14:20 +02:00
commit aa1c463c13
5 changed files with 625 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

523
bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

BIN
ce693a5f056d26f317b3.module.wasm Normal file
View file

Binary file not shown.

BIN
eb2719b1028f05cdacad.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 632 KiB

60
index.html Normal file
View file

@ -0,0 +1,60 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Spiegel</title>
<link rel="stylesheet" href="/css/styles.css">
<script defer src="bundle.js"></script></head>
<body>
<h1>Klaer Lightende Spiegel der Verfkonst</h1>
<h4>Paints your image in the colors of the
<a class="link" target="_blank"
href="https://nl.wikipedia.org/wiki/Klaer_Lightende_Spiegel_der_Verfkonst">handpainted
book by A. Boogert</a>,
<img id="spieghel" alt="spieghel" src="" class="hide">
the 1692 version of the Pantone color book.</h4>
<div class="main">
<label>
<h4>Upload or drag&drop a picture and move the slider, for a quick preview</h4>
<h4>Then press Apply</h4>
</label>
<div><input id="upload" type="file" accept="image/jpeg"></div>
<div id="slidecontainer" class="hide">
<label for="slider">Brush stroke size</label><input type="range" id="slider" value="0" min="0" max="100" class="slider"/>
<button id="apply">Apply</button>
</div>
</label>
<div class="main-content">
<div class="content" id="images">
<div id="image-container" class="border" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<canvas id="canvas" style="visibility: hidden;"></canvas>
</div>
</div>
<h4>(Painting can take long, be patient</h4>
<h4>all image processing is done in your browser)</h4>
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
let dt = event.dataTransfer;
console.log(dt.files);
document.querySelector("#source-image").src = URL.createObjectURL(dt.files[0]);
document.querySelector('#image-container').setAttribute("class", "no-border");
document.querySelector("#slidecontainer").setAttribute("class", "slidecontainer");
}
</script>
</body>
</html>

42
webclient_pkg_spiegel_client_js.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long