73 lines
2.8 KiB
JavaScript
73 lines
2.8 KiB
JavaScript
/**
|
||
* Iterative 4-connected flood fill on RGBA pixel data.
|
||
*
|
||
* Pure function — takes the source pixel array + seed + tolerance and
|
||
* returns a mask canvas with white where the fill landed. The legacy
|
||
* gallery editor's magic-wand tool delegates to this.
|
||
*
|
||
* @param {Uint8ClampedArray|Uint8Array} src RGBA bytes (length = w*h*4).
|
||
* @param {number} w Pixel width.
|
||
* @param {number} h Pixel height.
|
||
* @param {number} seedX Floored seed X.
|
||
* @param {number} seedY Floored seed Y.
|
||
* @param {number} tolerance Tolerance 0..100. Internally
|
||
* squared and scaled to RGB+A
|
||
* space (max ≈ 195k at 100).
|
||
* @returns {HTMLCanvasElement|null} A `w × h` mask canvas with
|
||
* white-opaque pixels for
|
||
* visited cells, or null if
|
||
* the seed is out of bounds.
|
||
*/
|
||
export function floodFillMask(src, w, h, seedX, seedY, tolerance) {
|
||
if (seedX < 0 || seedY < 0 || seedX >= w || seedY >= h) return null;
|
||
|
||
const seedIdx = (seedY * w + seedX) * 4;
|
||
const sr = src[seedIdx], sg = src[seedIdx + 1];
|
||
const sb = src[seedIdx + 2], sa = src[seedIdx + 3];
|
||
|
||
// 0..100 → squared RGB+A distance threshold. Max single-channel diff
|
||
// is 255, so sqrt(4 * 255²) ≈ 510; squared cap ≈ 195k at tol = 100.
|
||
const tol = Math.pow(tolerance * 4.42, 2);
|
||
|
||
const visited = new Uint8Array(w * h);
|
||
const stack = [seedX, seedY];
|
||
visited[seedY * w + seedX] = 1;
|
||
while (stack.length) {
|
||
const y = stack.pop();
|
||
const x = stack.pop();
|
||
const nbrs = [
|
||
[x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1],
|
||
];
|
||
for (const [nx, ny] of nbrs) {
|
||
if (nx < 0 || ny < 0 || nx >= w || ny >= h) continue;
|
||
const idx = ny * w + nx;
|
||
if (visited[idx]) continue;
|
||
const o = idx * 4;
|
||
const dr = src[o] - sr, dg = src[o + 1] - sg;
|
||
const db = src[o + 2] - sb, da = src[o + 3] - sa;
|
||
// RGB + alpha-aware so a click on a transparent pixel selects
|
||
// the transparent region cleanly.
|
||
if (dr * dr + dg * dg + db * db + da * da <= tol) {
|
||
visited[idx] = 1;
|
||
stack.push(nx, ny);
|
||
}
|
||
}
|
||
}
|
||
|
||
const mask = document.createElement('canvas');
|
||
mask.width = w;
|
||
mask.height = h;
|
||
const mCtx = mask.getContext('2d');
|
||
const mData = mCtx.createImageData(w, h);
|
||
for (let i = 0; i < w * h; i++) {
|
||
if (visited[i]) {
|
||
mData.data[i * 4] = 255;
|
||
mData.data[i * 4 + 1] = 255;
|
||
mData.data[i * 4 + 2] = 255;
|
||
mData.data[i * 4 + 3] = 255;
|
||
}
|
||
}
|
||
mCtx.putImageData(mData, 0, 0);
|
||
return mask;
|
||
}
|