page: /dither

package.json

@@ -44,6 +44,7 @@
     "@prisma/client": "^7.4.2",
     "@sveltejs/adapter-node": "^5.5.3",
     "@types/js-yaml": "^4.0.9",
+    "canvas-dither": "^1.0.1",
     "date-fns": "^4.1.0",
     "dotenv": "^17.3.1",
     "feed": "^4.2.2",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@types/js-yaml':
         specifier: ^4.0.9
         version: 4.0.9
+      canvas-dither:
+        specifier: ^1.0.1
+        version: 1.0.1
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -1010,6 +1013,9 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  canvas-dither@1.0.1:
+    resolution: {integrity: sha512-wT1RnV2y9SauibcsfMMCagQTnXmyQq2nJXuX5tTEvo0sXm1vVbJ2r8QxSC3fRQMY3ZgZVq1j54cOvmO4u+Lu/A==}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -3165,6 +3171,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  canvas-dither@1.0.1: {}
+
   ccount@2.0.1: {}
 
   chai@5.3.3:

src/routes/dither/+layout.svelte

@@ -0,0 +1,29 @@
+<script>
+  const { children } = $props()
+</script>
+
+<svelte:head>
+  <title>Dithering Tool | thomaswilson.xyz</title>
+</svelte:head>
+
+<main class="page-dither">
+  <h1 class="page-dither__title">Image Dither Tool</h1>
+  <p class="page-dither__about">
+    In-browser, privacy respecting image dithering tool.
+  </p>
+  {@render children()}
+</main>
+
+<style>
+  .page-dither {
+    display: flex;
+    flex-direction: column;
+    min-height: 100dvh;
+    background: var(--gray-1000);
+  }
+
+  .page-dither__title {
+    font-size: 3rem;
+    font-family: sans-serif;
+  }
+</style>

src/routes/dither/+page.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import Dither from 'canvas-dither'
+    import ErrorMessage from './ErrorMessage.svelte';
+    import { onMount } from 'svelte';
+  
+  const DITHERING_ALGORITHMS = {
+    atkinson: (imageData) => Dither.atkinson(imageData),
+    bayer: (imageData) => Dither.bayer(imageData, 170),
+    floydSteinberg: (imageData) => Dither.floydsteinberg(imageData),
+    threshold: (imageData) => Dither.threshold(imageData, 2),
+  }
+
+  let canvas: HTMLCanvasElement;
+  let offscreenCanvas: OffscreenCanvas;
+  let ctx = $derived(canvas.getContext('2d'))
+  let offscreenCtx: OffscreenCanvasRenderingContext2D;
+  let imgObjectUrl = $state('')
+  let errorMessage = $state('')
+
+  onMount(() => {
+   offscreenCanvas = new OffscreenCanvas(1000, 1000)
+   offscreenCtx = offscreenCanvas.getContext('2d')
+  })
+
+  const doesCtxExist = () => {
+    if (!ctx) {
+      errorMessage = "Problem finding context for on-screen canvas"
+      return false
+    }
+
+    return true;
+  }
+
+  const handleImageChange = async (event: any) => {
+    const file = event.target.files[0];
+    if (!file) {
+      errorMessage = "No file selected, try again"
+      return
+    }
+
+    imgObjectUrl = URL.createObjectURL(file);
+    const image = await createImage(imgObjectUrl);
+
+    // Change the sizes of canvases
+    canvas.width = image.width
+    canvas.height = image.height
+
+    offscreenCanvas.height = image.height
+    offscreenCanvas.width = image.width
+
+    // Now draw the images 
+    drawImage(image)
+  }
+
+  async function createImage(objectUrl: string):  Promise<HTMLImageElement> {
+    return new Promise<HTMLImageElement>((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        if (!ctx) return;
+        resolve(img);
+      }
+      img.src = objectUrl;
+    });
+  }
+
+  const clearCanvases = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+  }
+
+  const drawImage = (theImage: HTMLImageElement) => {
+    if (!doesCtxExist()) return
+    clearCanvases()
+    ctx.drawImage(theImage, 0, 0, canvas.width, canvas.height);  
+    offscreenCtx.drawImage(theImage, offscreenCanvas.width, offscreenCanvas.height)
+  }
+
+  function applyDitheringAlgorithm(algorithm: (imageData: ImageData) => ImageData) {
+    return async () => {
+      const freshImage = await createImage(imgObjectUrl);
+      drawImage(freshImage)
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const ditheredImageData = algorithm(imageData);
+      ctx.putImageData(ditheredImageData, 0, 0);
+    }
+  }
+
+  function saveImage() {
+    if (!canvas) return;
+    const link = document.createElement('a');
+    link.download = 'dithered-image.png';
+    link.href = canvas.toDataURL();
+    link.click();
+  }
+
+</script>
+
+<ErrorMessage message={errorMessage} />
+
+<h2 class="page-dither__subtitle">1: Select a file</h2>
+
+<form class="file-form">
+  <label for="file"> Select a file<br />
+    <input type="file" name="file" id="file" onchange={handleImageChange} accept="image/*" >
+  </label>
+</form>
+
+<h2 class="page-dither__subtitle">2: Select a dithering algorithm</h2>
+
+<ul class="algorithms">
+  {#each Object.entries(DITHERING_ALGORITHMS) as [key, value]}
+    <li class="algorithms__item">
+      <button class="algorithms__button" onclick={applyDitheringAlgorithm(value)}>{key}</button>
+    </li>
+  {/each}
+</ul>
+
+
+<div class="canvas-container">
+  <canvas id="photo-canvas" height="250" bind:this={canvas} onload={() => ctx = canvas.getContext('2d')}></canvas>
+</div>
+
+
+<h2 class="page-dither__subtitle">
+  3: Save the file
+</h2>
+<button onclick={saveImage}>Save Image</button>
+
+
+<style>
+  .algorithms {
+    list-style: none;
+    display: grid;
+    grid-template-columns: auto;
+    gap: 4px;
+  }
+
+  .algorithms__button {
+    box-shadow: 5px 2px blue;
+
+      &:hover {
+        background: var()
+      }
+  }
+
+  .canvas-container {
+    display: flex;
+    width: auto;
+    padding: 14px;
+    height: min-content
+  }
+
+  #photo-canvas {
+    width: 100%;
+  }
+
+
+</style>

src/routes/dither/Editor.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Photon } from '@silvia-odwyer/photon-node'
+
+  interface Props {
+    photon: Photon
+  }
+
+  const { photon }: Props = $props()
+</script>

src/routes/dither/ErrorMessage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  const { errorMessage } = $props()
+</script>
+
+{#if errorMessage}
+  <div class="error-message" aria-live="polite">
+    <p>{errorMessage}</p>
+  </div>
+{/if}
+
+<style>
+  .error-message {
+    border: 2px solid red;
+    border-radius: 5px;
+    font-size: 1rem;
+    padding: 8px;
+  }
+</style>

src/routes/photo-posts/new/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from "./$types.js";
+
+export const load: PageServerLoad = async({}) => {
+  return {
+
+  }
+}

src/routes/photo-posts/new/+page.svelte

@@ -0,0 +1 @@
+<h1>Create a new photo post</h1>

src/routes/photo-posts/new/page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from "./$types.js";
+
+export const load: PageServerLoad = async({}) => {
+  return {
+
+  }
+}