| <!doctype html> |
| <html> |
| <head> |
| <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script> |
| <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> |
| <style> |
| body { |
| grid-template-columns: none !important; |
| } |
| |
| .editor { |
| display: flex; |
| width: 100vw; |
| height: 100vh; |
| } |
| |
| .toolbar { |
| width: 500px; |
| } |
| |
| .toolbar-item { |
| padding: 15px; |
| display: inline-block; |
| } |
| |
| .tool-label { |
| display: block; |
| margin-bottom: 5px; |
| font-size: 14px; |
| font-weight: bold; |
| } |
| |
| .tool-input { |
| width: 100%; |
| } |
| |
| .image-area { |
| flex-grow: 1; |
| padding: 20px; |
| } |
| |
| #canvas { |
| max-width: 100%; |
| max-height: 100%; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="editor"> |
| <div class="toolbar"> |
| <div class="toolbar-item"> |
| <input type="file" id="imageFileInput"> |
| </div> |
|
|
| <div class="toolbar-item"> |
| <label class="tool-label" for="scale">Scale (4)</label> |
| <input class="tool-input" type="range" id="scale" min="2" max="16" value="4" step="2" oninput="this.previousElementSibling.innerHTML = 'Scale (' + this.value + ')'"> |
| </div> |
| <div class="toolbar-item"> |
| <label class="tool-label" for="colors">Colors (16)</label> |
| <input class="tool-input" type="range" id="colors" min="4" max="256" value="16" step="2" oninput="this.previousElementSibling.innerHTML = 'Colors (' + this.value + ')'"> |
| </div> |
| <br /> |
| <div class="toolbar-item"> |
| <label for="quant">Quantization method:</label> |
| <select name="quant" id="quant"> |
| <option value="3">LibImageQuant</option> |
| <option value="0">MedianCut</option> |
| <option value="2">FastOctree</option> |
| <option value="1">MaxCoverage</option> |
| </select> |
| </div> |
| <div class="toolbar-item"> |
| <input type="checkbox" id="dither" name="dither" checked /> |
| <label for="dither">Enable Dithering</label> |
| </div> |
| <div class="toolbar-item"> |
| <input type="checkbox" id="kmeans" name="kmeans" /> |
| <label for="kmeans">Enable K-Means</label> |
| </div> |
| <div class="toolbar-item"> |
| <input type="checkbox" id="rgb555" name="rgb555" checked /> |
| <label for="rgb555">Apply RGB555</label> |
| </div> |
| <div class="toolbar-item"> |
| <input type="checkbox" id="snescrop" name="snescrop" /> |
| <label for="snescrop">Crop to SNES size</label> |
| </div> |
| <div class="toolbar-item"> |
| <input type="checkbox" id="rescale" name="rescale" checked /> |
| <label for="rescale">Rescale post-processing</label> |
| </div> |
| <div class="toolbar-item"> |
| <button onclick="pixelize()">Run</button> |
| </div> |
| <div class="toolbar-item"> |
| <button id="reloadBtn" onclick="loadImage()" disabled>Reload original</button> |
| </div> |
| <div class="toolbar-item"> |
| <textarea id="consoleOutput" style="width: 465px;" rows="20" disabled></textarea> |
| </div> |
| </div> |
| <div class="image-area"> |
| <canvas id="canvas" height="500" width="500"></canvas> |
| </div> |
| </div> |
| </body> |
|
|
| <script> |
| const fileInput = document.querySelector("#imageFileInput"); |
| const canvas = document.querySelector("#canvas"); |
| const canvasCtx = canvas.getContext("2d"); |
| const consoleOutput = document.getElementById("consoleOutput"); |
| |
| let image = null; |
| |
| function loadImage() { |
| canvas.width = image.width; |
| canvas.height = image.height; |
| canvasCtx.drawImage(image, 0, 0); |
| } |
| |
| fileInput.addEventListener("change", () => { |
| document.getElementById("reloadBtn").disabled = false; |
| image = new Image(); |
| |
| image.addEventListener("load", () => { |
| loadImage(); |
| }); |
| |
| image.src = URL.createObjectURL(fileInput.files[0]); |
| }); |
| |
| function addToOutput(s) { |
| consoleOutput.value += s + "\n"; |
| } |
| |
| async function main() { |
| let pyodide = await loadPyodide(); |
| await pyodide.loadPackage("numpy"); |
| await pyodide.loadPackage("./pillow-10.2.0-cp312-cp312-pyodide_2024_0_wasm32.whl"); |
| return pyodide; |
| } |
| |
| let pyodideReadyPromise = main(); |
| |
| async function pixelize() { |
| if (!image) return; |
| consoleOutput.value = ""; |
| |
| let pyodide = await pyodideReadyPromise; |
| |
| try { |
| pyodide.runPython(` |
| import numpy as np |
| from PIL import Image |
| from js import canvas, scale, colors, quant, dither, kmeans, rgb555, snescrop, rescale, addToOutput, ImageData |
| from pyodide.ffi import create_proxy |
| |
| # Access to canvas content |
| canvasCtx = canvas.getContext("2d") |
| |
| # SNES helpers |
| toRGB555 = lambda v: v >> 3 << 3 |
| def apply(arr, fn): |
| vfn = np.vectorize(fn,otypes=[arr.dtype]) |
| return vfn(arr.flatten()).reshape(arr.shape) |
| def snes_crop(image): |
| width, height = image.size |
| new_width, new_height = 256, 224 |
| left = max([0, (width - new_width)/2]) |
| top = max([0, (height - new_height)/2]) |
| right = min([width, (width + new_width)/2]) |
| bottom = min([height, (height + new_height)/2]) |
| return image.crop((left, top, right, bottom)) |
| |
| addToOutput("Starting...") |
| |
| # Read canvas ImageData as PIL.Image |
| im = Image.fromarray(np.array(canvasCtx.getImageData(0,0,canvas.width,canvas.height,{"pixelFormat":"rgba-unorm8"}).data.to_py()).reshape(canvas.height,canvas.width,4),mode='RGBA') |
| w, h = im.width, im.height |
| addToOutput(f"Got image of size ({w},{h})") |
| |
| # Stupid pixel by resize |
| s = int(scale.value) |
| w, h = int(w/s), int(h/s) |
| im = im.resize((w,h)) |
| addToOutput(f"Resized by scale {s} to ({w},{h})") |
| |
| # Reduce or quantize colors |
| dither_method = Image.Dither.FLOYDSTEINBERG if dither.checked else Image.Dither.NONE |
| kmeans_colors = int(colors.value) if kmeans.checked else 0 |
| im = im.convert('RGB').quantize(colors=int(colors.value), method=int(quant.value), dither=dither_method, kmeans=kmeans_colors).convert('RGBA') |
| addToOutput(f"Quantized to {colors.value} colors") |
| |
| # Apply RGB555 |
| if rgb555.checked: |
| im = Image.fromarray(apply(np.asarray(im.convert('RGB'),dtype='uint8'),toRGB555),'RGB').convert('RGBA') |
| addToOutput(f"Applied RGB555") |
| |
| # Apply SNES crop |
| if snescrop.checked: |
| im = snes_crop(im) |
| w, h = im.width, im.height |
| addToOutput(f"Cropped to ({w},{h})") |
| |
| # Rescale post-processing |
| if rescale.checked: |
| im = im.resize((w*s,h*s)) |
| w, h = im.width, im.height |
| addToOutput(f"Rescaled to ({w},{h})") |
| |
| # Convert back to ImageData |
| im = np.asarray(im,dtype='uint8').tobytes() |
| pixels_proxy = create_proxy(im) |
| pixels_buf = pixels_proxy.getBuffer("u8clamped") |
| img_data = ImageData.new(pixels_buf.data, w, h) |
| canvas.width = w |
| canvas.height = h |
| canvasCtx.putImageData(img_data, 0, 0) |
| pixels_proxy.destroy() |
| pixels_buf.release() |
| |
| addToOutput("Done!") |
| `); |
| } catch (err) { |
| addToOutput(err); |
| } |
| } |
| </script> |
| </html> |
