+++
title: Floyd-Steinberg Dithering Tool
+++

<style>
.canvas-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding-sm);
}
.canvas-container > div {
    min-width: 300px;
}
  
.canvas-container canvas {
    max-width: 100%;
    height: auto;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.controls label {
  margin-right: -12px;
}

#customPaletteSection {
    display: none;
    margin: 0.75rem 0;
}
#customPaletteSection.visible {
    display: block;
}
.palette-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.palette-colors .swatch {
    position: relative;
    width: 2rem;
    height: 2rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}
.palette-colors .swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    opacity: 0;
}
.palette-colors .swatch .remove-color {
    display: none;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #c00;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}
.palette-colors .swatch:hover .remove-color {
    display: block;
}
#addColorBtn {
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 2rem;
    padding: 0;
    cursor: pointer;
}
.saved-palettes-section {
    margin-top: 0.75rem;
}
.save-palette-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.save-palette-row input[type="text"] {
    flex: 1;
    padding: 0.25rem 0.5rem;
    max-width: 200px;
}
.save-palette-row button {
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}
.saved-palette-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.saved-palette-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.saved-palette-list .sp-swatches {
    display: flex;
    gap: 2px;
}
.saved-palette-list .sp-swatch {
    width: 1rem;
    height: 1rem;
    border: 1px solid #ccc;
    border-radius: 2px;
}
.saved-palette-list button {
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}
</style>

<p>Upload an image to apply Floyd-Steinberg dithering.</p>

<hr>

<input type="file" id="imageInput" accept="image/*">

<div class="controls">
<label for="outputWidth">Output width (px):</label>
<input type="number" id="outputWidth" value="300" min="1" max="4096">
<label for="paletteSize">Palette:</label>
<select id="paletteSize">
<option value="bw">Black & White</option>
<option value="4">4 colours</option>
<option value="8">8 colours</option>
<option value="16">16 colours</option>
<option value="32">32 colours</option>
<option value="64">64 colours</option>
<option value="128">128 colours</option>
<option value="256" selected>256 colours</option>
<option value="custom">Custom palette</option>
</select>
<button id="downloadBtn" disabled>Download Dithered Image</button>
</div>

<div id="customPaletteSection">
<div class="palette-colors" id="paletteColors"></div>
<button id="addColorBtn" title="Add colour">+</button>
<div class="saved-palettes-section">
<div class="save-palette-row">
<input type="text" id="paletteName" placeholder="Palette name">
<button id="savePaletteBtn">Save</button>
</div>
<ul class="saved-palette-list" id="savedPaletteList"></ul>
</div>
</div>

<hr>

<div class="canvas-container">
<div>
<h3>Original</h3>
<canvas id="originalCanvas"></canvas>
</div>
<div>
<h3 id="ditheredLabel">Dithered (256 colours)</h3>
<canvas id="ditheredCanvas"></canvas>
</div>
</div>

<script src="/vendor/rgbquant.js"></script>
<script>
(function() {
    const imageInput = document.getElementById('imageInput');
    const outputWidth = document.getElementById('outputWidth');
    const paletteSizeSelect = document.getElementById('paletteSize');
    const ditheredLabel = document.getElementById('ditheredLabel');
    const originalCanvas = document.getElementById('originalCanvas');
    const ditheredCanvas = document.getElementById('ditheredCanvas');
    const downloadBtn = document.getElementById('downloadBtn');
    const customSection = document.getElementById('customPaletteSection');
    const paletteColorsDiv = document.getElementById('paletteColors');
    const addColorBtn = document.getElementById('addColorBtn');
    const savePaletteBtn = document.getElementById('savePaletteBtn');
    const paletteNameInput = document.getElementById('paletteName');
    const savedPaletteList = document.getElementById('savedPaletteList');
    const STORAGE_KEY = 'dither-saved-palettes';
    const origCtx = originalCanvas.getContext('2d');
    const dithCtx = ditheredCanvas.getContext('2d');
    let currentImg = null;
    const defaultCustomColors = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff'];

    function hexToRgb(hex) {
        const n = parseInt(hex.slice(1), 16);
        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
    }

    function buildCustomPalette() {
        return Array.from(paletteColorsDiv.querySelectorAll('input[type="color"]')).map(function(i) {
            return hexToRgb(i.value);
        });
    }

    function addSwatch(color) {
        var swatch = document.createElement('div');
        swatch.className = 'swatch';
        swatch.style.backgroundColor = color;
        var input = document.createElement('input');
        input.type = 'color';
        input.value = color;
        input.addEventListener('input', function() {
            swatch.style.backgroundColor = input.value;
            if (currentImg) processImage(currentImg);
        });
        var rm = document.createElement('button');
        rm.className = 'remove-color';
        rm.textContent = '\u00d7';
        rm.addEventListener('click', function(e) {
            e.stopPropagation();
            swatch.remove();
            if (currentImg) processImage(currentImg);
        });
        swatch.appendChild(input);
        swatch.appendChild(rm);
        paletteColorsDiv.appendChild(swatch);
    }

    function initCustomPalette() {
        paletteColorsDiv.innerHTML = '';
        defaultCustomColors.forEach(addSwatch);
    }

    addColorBtn.addEventListener('click', function() {
        addSwatch('#888888');
        if (currentImg) processImage(currentImg);
    });

    paletteSizeSelect.addEventListener('change', function() {
        var isCustom = paletteSizeSelect.value === 'custom';
        customSection.className = isCustom ? 'visible' : '';
        if (isCustom && paletteColorsDiv.children.length === 0) initCustomPalette();
        if (currentImg) processImage(currentImg);
    });

    // Step-down resize to avoid aliasing on large scale reductions
    function downscale(img, targetW, targetH) {
        let sw = img.width, sh = img.height;
        let src = img;
        while (sw / 2 > targetW) {
            const step = document.createElement('canvas');
            const hw = Math.round(sw / 2), hh = Math.round(sh / 2);
            step.width = hw;
            step.height = hh;
            step.getContext('2d').drawImage(src, 0, 0, hw, hh);
            src = step;
            sw = hw;
            sh = hh;
        }
        const final = document.createElement('canvas');
        final.width = targetW;
        final.height = targetH;
        final.getContext('2d').drawImage(src, 0, 0, targetW, targetH);
        return final;
    }

    function processImage(img) {
        const value = paletteSizeSelect.value;
        const size = parseInt(value) || 2;

        if (value === 'custom') {
            var cp = buildCustomPalette();
            ditheredLabel.textContent = 'Dithered (Custom, ' + cp.length + ' colours)';
        } else if (value === 'bw') {
            ditheredLabel.textContent = 'Dithered (Black & White)';
        } else {
            ditheredLabel.textContent = 'Dithered (' + size + ' colours)';
        }

        const targetW = Math.max(1, parseInt(outputWidth.value) || 300);
        const scale = targetW / img.width;
        const targetH = Math.round(img.height * scale);

        originalCanvas.width = targetW;
        originalCanvas.height = targetH;
        ditheredCanvas.width = targetW;
        ditheredCanvas.height = targetH;

        const scaled = downscale(img, targetW, targetH);
        origCtx.drawImage(scaled, 0, 0);

        var opts = {
            colors: size,
            dithKern: 'FloydSteinberg',
            dithSerp: true,
        };

        if (value === 'bw') {
            opts.palette = [[0, 0, 0], [255, 255, 255]];
        } else if (value === 'custom') {
            var customPalette = buildCustomPalette();
            if (customPalette.length < 2) return;
            opts.palette = customPalette;
            opts.colors = customPalette.length;
        }

        var q = new RgbQuant(opts);
        q.sample(originalCanvas);
        var reduced = q.reduce(originalCanvas);

        var imageData = dithCtx.createImageData(targetW, targetH);
        imageData.data.set(reduced);
        dithCtx.putImageData(imageData, 0, 0);

        downloadBtn.disabled = false;
    }

    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const img = new Image();
        img.onload = function() {
            currentImg = img;
            processImage(img);
        };
        img.src = URL.createObjectURL(file);
    });

    outputWidth.addEventListener('change', function() {
        if (currentImg) processImage(currentImg);
    });

    downloadBtn.addEventListener('click', function() {
        const link = document.createElement('a');
        link.download = 'dithered.png';
        link.href = ditheredCanvas.toDataURL('image/png');
        link.click();
    });

    function getSavedPalettes() {
        try {
            return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
        } catch(e) {
            return {};
        }
    }

    function setSavedPalettes(palettes) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(palettes));
    }

    function getCurrentColors() {
        return Array.from(paletteColorsDiv.querySelectorAll('input[type="color"]')).map(function(i) {
            return i.value;
        });
    }

    function renderSavedPalettes() {
        var palettes = getSavedPalettes();
        savedPaletteList.innerHTML = '';
        Object.keys(palettes).forEach(function(name) {
            var li = document.createElement('li');
            var label = document.createElement('span');
            label.textContent = name;
            var swatches = document.createElement('span');
            swatches.className = 'sp-swatches';
            palettes[name].forEach(function(c) {
                var s = document.createElement('span');
                s.className = 'sp-swatch';
                s.style.backgroundColor = c;
                swatches.appendChild(s);
            });
            var loadBtn = document.createElement('button');
            loadBtn.textContent = 'Load';
            loadBtn.addEventListener('click', function() {
                paletteColorsDiv.innerHTML = '';
                palettes[name].forEach(addSwatch);
                if (currentImg) processImage(currentImg);
            });
            var delBtn = document.createElement('button');
            delBtn.textContent = '\u00d7';
            delBtn.title = 'Delete';
            delBtn.addEventListener('click', function() {
                var p = getSavedPalettes();
                delete p[name];
                setSavedPalettes(p);
                renderSavedPalettes();
            });
            li.appendChild(label);
            li.appendChild(swatches);
            li.appendChild(loadBtn);
            li.appendChild(delBtn);
            savedPaletteList.appendChild(li);
        });
    }

    savePaletteBtn.addEventListener('click', function() {
        var name = paletteNameInput.value.trim();
        if (!name) return;
        var colors = getCurrentColors();
        if (colors.length === 0) return;
        var palettes = getSavedPalettes();
        palettes[name] = colors;
        setSavedPalettes(palettes);
        paletteNameInput.value = '';
        renderSavedPalettes();
    });

    renderSavedPalettes();
})();
</script>