PaletteSwitcher/dist/index.html

100 lines
2.9 KiB
HTML
Raw Normal View History

2021-11-21 19:12:16 +00:00
<html>
<head>
<meta charset="utf-8" />
2021-11-23 20:49:50 +00:00
<script type="module" src="./wasm_exec.js"></script>
<script type="module" src="./main.js"></script>
2021-11-21 19:12:16 +00:00
<style>
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #000;
}
a:link {
color: #9cf;
}
a:hover,
a:visited:hover {
color: #cef;
}
a:visited {
color: #c9f;
}
}
body {
margin: 1em auto;
max-width: 40em;
padding: 0 0.62em;
font: 1.2em/1.62 sans-serif;
}
h1,
h2,
h3 {
line-height: 1.2;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
#output {
max-width: 100%;
align-self: center;
2021-12-11 15:25:21 +00:00
image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering: crisp-edges; /* CSS4 Proposed */
image-rendering: pixelated; /* CSS4 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
2021-11-21 19:12:16 +00:00
}
@media print {
body {
max-width: none;
}
}
</style>
</head>
<body>
<article>
<h1>Go+Wasm image dithering tool</h1>
<aside>Featuring the Nord Color Palette</aside>
<p>
Load an image, click Go and wait (potentially for a while) for the image
to be dithered using the Nord color palette and the Floyd-Steinberg
algorithm.
</p>
<p>
2021-11-23 20:49:50 +00:00
Running in the browser with Wasm causes a bit of a performance penalty.
Multithreading is not available (not that it matters much since
Floyd-Steinberg is single-threaded), and sending data back and forth
between JS and Wasm can take a little while.
</p>
<p>
I've re-used code from
<a
href="https://www.sitepen.com/blog/using-webassembly-with-web-workers"
>this article</a
>
to make the Wasm code run in a web worker, with some adaptations for Go
oddities.
2021-11-21 19:12:16 +00:00
</p>
<p>
If you're into that sort of thing, source code is available on
<a href="https://github.com/CrispyBaguette/wasm-palette-converter"
>GitHub</a
>.
</p>
<form>
<input type="file" id="source-image" accept="image/png, image/jpeg" />
2021-11-23 20:49:50 +00:00
<button id="go-btn" type="button" disabled>Go</button>
2021-11-21 19:12:16 +00:00
</form>
2021-11-23 20:49:50 +00:00
<a id="output-wrapper" download="output.png">
<div class="container">
<img id="output" />
</div>
</a>
2021-11-21 19:12:16 +00:00
</article>
</body>
</html>