<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Floyd-Steinberg Dithering</title> <style> @font-face { font-family: 'ChicagoFLF'; src: url('https://eli.li/_assets/bin/inknswitch/ChicagoFLF.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { display: block; padding: 0.25em 0.5em; background-color: beige; font-family: sans-serif; font-size: large; } h1,h2 { font-family: 'ChicagoFLF', sans-serif; margin: 0; } label { font-family: 'ChicagoFLF', sans-serif; font-size: 1.25em; } canvas, input, button { max-width: calc(100% - 4em); padding: 0; border: 1px solid rgb(133, 133, 133); box-sizing: border-box; } button, input[type="file"] { border-radius: 7px; cursor: pointer; padding: 0.5em 1em; font-size: 1.25em; } </style> </head> <body> <h1>Dither me this</h1> <canvas id="canvas"></canvas> <br> <br> <h2>Step 1.</h2> <label for="upload">Upload an image</label> <br> <input type="file" id="upload" accept="image/*"> <br> <br> <h2>Step 2.</h2> <label for="download">Download the image</label> <br> <button id="download">Download Image</button> <p>Note that the image processing all happens in your browser, nothing is ever uploaded to anything other than your browser.</p> <script src="dither.js"></script> </body> </html>