@scanmate/diff 0.0.2

package/dist/index.esm.js

@@ -0,0 +1,783 @@
+import { decodeImage, binarize, inkMap, toGrayscale, otsuThreshold, dilate, coverage, createRaster, encodeImage } from '@scanmate/ink';
+
+const IDENTIFIED = [30, 160, 70, 255];
+const NOT_IDENTIFIED = [230, 150, 20, 255];
+const UNEXPECTED = [200, 30, 190, 255];
+const MISSING = [20, 90, 230, 255];
+function annotateOverlay(overlay, annotations, thickness = 2) {
+  for (const {
+    rect,
+    color
+  } of annotations) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = rect;
+    fill(overlay, {
+      x,
+      y,
+      width,
+      height: thickness
+    }, color);
+    fill(overlay, {
+      x,
+      y: y + height - thickness,
+      width,
+      height: thickness
+    }, color);
+    fill(overlay, {
+      x,
+      y,
+      width: thickness,
+      height
+    }, color);
+    fill(overlay, {
+      x: x + width - thickness,
+      y,
+      width: thickness,
+      height
+    }, color);
+  }
+}
+/** Fill a rectangle, clipped to the raster - an outline grown past the page edge draws what fits. */
+function fill(raster, rect, color) {
+  const left = Math.max(0, Math.round(rect.x));
+  const top = Math.max(0, Math.round(rect.y));
+  const right = Math.min(raster.width, Math.round(rect.x + rect.width));
+  const bottom = Math.min(raster.height, Math.round(rect.y + rect.height));
+  for (let y = top; y < bottom; y++) for (let x = left, i = (y * raster.width + left) * 4; x < right; x++, i += 4) {
+    raster.data[i] = color[0];
+    raster.data[i + 1] = color[1];
+    raster.data[i + 2] = color[2];
+    raster.data[i + 3] = color[3];
+  }
+}
+
+function connectedComponents(mask, options = {}) {
+  return labelComponents(mask, options).components;
+}
+/** {@link connectedComponents}, keeping the label image the second pass resolves anyway. */
+function labelComponents(mask, options = {}) {
+  const {
+    connectivity = 8
+  } = options;
+  const {
+    width,
+    height,
+    data
+  } = mask;
+  const labels = new Int32Array(width * height);
+  // Label 0 is background; provisional labels start at 1. At most one per
+  // two pixels can be provisional, which bounds the parent table.
+  const parent = new Int32Array(Math.floor(width * height / 2) + 2);
+  const size = new Int32Array(parent.length);
+  let next = 1;
+  const find = label => {
+    let root = label;
+    while (parent[root] !== root) {
+      parent[root] = parent[parent[root]];
+      root = parent[root];
+    }
+    return root;
+  };
+  const union = (a, b) => {
+    let ra = find(a);
+    let rb = find(b);
+    if (ra === rb) return ra;
+    if (size[ra] < size[rb]) [ra, rb] = [rb, ra];
+    parent[rb] = ra;
+    size[ra] += size[rb];
+    return ra;
+  };
+  for (let y = 0; y < height; y++) {
+    const row = y * width;
+    for (let x = 0; x < width; x++) {
+      const p = row + x;
+      if (data[p] === 0) continue;
+      let label = 0;
+      const consider = q => {
+        const l = labels[q];
+        if (l === 0) return;
+        label = label === 0 ? l : union(label, l);
+      };
+      if (x > 0) consider(p - 1);
+      if (y > 0) {
+        consider(p - width);
+        if (connectivity === 8) {
+          if (x > 0) consider(p - width - 1);
+          if (x < width - 1) consider(p - width + 1);
+        }
+      }
+      if (label === 0) {
+        if (next >= parent.length) throw new RangeError('connected-component label table overflow');
+        label = next++;
+        parent[label] = label;
+        size[label] = 1;
+      }
+      labels[p] = label;
+    }
+  }
+  // Second pass: resolve to roots and accumulate each root's box.
+  const index = new Int32Array(next).fill(-1);
+  const boxes = [];
+  for (let y = 0; y < height; y++) {
+    const row = y * width;
+    for (let x = 0; x < width; x++) {
+      const l = labels[row + x];
+      if (l === 0) continue;
+      const root = find(l);
+      let i = index[root];
+      if (i === -1) {
+        i = boxes.length;
+        index[root] = i;
+        boxes.push({
+          minX: x,
+          minY: y,
+          maxX: x,
+          maxY: y,
+          pixels: 0
+        });
+      }
+      labels[row + x] = i + 1;
+      const box = boxes[i];
+      if (x < box.minX) box.minX = x;
+      if (x > box.maxX) box.maxX = x;
+      if (y > box.maxY) box.maxY = y;
+      box.pixels++;
+    }
+  }
+  const components = boxes.map(b => ({
+    x: b.minX,
+    y: b.minY,
+    width: b.maxX - b.minX + 1,
+    height: b.maxY - b.minY + 1,
+    pixels: b.pixels
+  }));
+  return {
+    components,
+    labels
+  };
+}
+
+/** Default for {@link buildMasks}' `faintInk`, measured against real scans. */
+const FAINT_INK = 0.25;
+async function buildMasks(original, aligned, ink, tolerance, faintInk = FAINT_INK) {
+  const originalRaster = await decodeImage(original);
+  const alignedRaster = await decodeImage(aligned);
+  if (originalRaster.width !== alignedRaster.width || originalRaster.height !== alignedRaster.height) throw new Error(`compareRegions needs both images on the same canvas: got ${originalRaster.width}x${originalRaster.height} and ${alignedRaster.width}x${alignedRaster.height}. Align the scan first.`);
+  const originalMask = binarize(inkMap(toGrayscale(originalRaster), ink));
+  const scanInk = inkMap(toGrayscale(alignedRaster), ink);
+  const scanMask = binarize(scanInk);
+  const scanFaint = above(scanInk, faintInk * Math.max(otsuThreshold(scanInk), MIN_THRESHOLD));
+  return {
+    width: originalRaster.width,
+    height: originalRaster.height,
+    original: originalMask,
+    scan: scanMask,
+    scanFaint,
+    originalDilated: dilate(originalMask, tolerance),
+    scanDilated: dilate(scanFaint, tolerance)
+  };
+}
+/** `binarize`'s own floor on the Otsu threshold, so the faint bar scales from the same number. */
+const MIN_THRESHOLD = 0.12;
+/**
+ * Threshold without `binarize`'s floor: the faint bar is meant to sit below it.
+ * `inkMap` has already zeroed paper noise, so nothing here reads blank paper as ink.
+ */
+function above(image, cut) {
+  const data = new Uint8Array(image.data.length);
+  for (let p = 0; p < data.length; p++) data[p] = image.data[p] > cut ? 1 : 0;
+  return {
+    width: image.width,
+    height: image.height,
+    data
+  };
+}
+
+/**
+ * What changed, and where.
+ *
+ * Once the scan sits on the original's canvas, "was this box signed?" stops
+ * being an image problem and becomes arithmetic: count the ink inside the
+ * rectangle that is present in the scan and absent from the original.
+ *
+ * The one subtlety is the tolerance band. Alignment is good to a pixel or so,
+ * never to zero, and printed text is mostly edges — so a half-pixel shift
+ * lights up the outline of every character as "new ink". Dilating the
+ * original's mask first (fattening every stroke by a couple of pixels) absorbs
+ * that, the way a proofreader ignores a letter sitting a hair off the baseline.
+ * What it cannot absorb is a signature, which is ink in places the original has
+ * none.
+ */
+/**
+ * Compare an aligned scan against its original over a set of known rectangles.
+ *
+ * `aligned` must be the output of `alignScan` - or anything else already on the
+ * original's canvas. Feeding a raw scan in produces confident nonsense, because
+ * every rectangle then names a different part of the page in each image.
+ */
+async function compareRegions(original, aligned, regions, options = {}) {
+  const {
+    tolerance = 2,
+    threshold = 0.02,
+    ink,
+    faintInk
+  } = options;
+  const masks = await buildMasks(original, aligned, ink, tolerance, faintInk);
+  return regions.map(region => measureRegion(region, masks, threshold));
+}
+/** Page-wide added/removed ink, plus per-region detail for any regions supplied. */
+async function diffDocument(original, aligned, regions = [], options = {}) {
+  const {
+    tolerance = 2,
+    threshold = 0.02,
+    ink,
+    faintInk
+  } = options;
+  const masks = await buildMasks(original, aligned, ink, tolerance, faintInk);
+  const full = {
+    x: 0,
+    y: 0,
+    width: masks.width,
+    height: masks.height
+  };
+  const whole = measureRegion({
+    id: '__document__',
+    rect: full
+  }, masks, threshold);
+  return {
+    added: whole.added,
+    removed: whole.removed,
+    regions: regions.map(region => measureRegion(region, masks, threshold))
+  };
+}
+/** One region's added and removed ink, from masks already built. */
+function measureRegion(region, masks, defaultThreshold) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = region.rect;
+  const left = Math.max(0, Math.floor(x));
+  const top = Math.max(0, Math.floor(y));
+  const right = Math.min(masks.width, Math.ceil(x + width));
+  const bottom = Math.min(masks.height, Math.ceil(y + height));
+  if (right <= left || bottom <= top) return {
+    id: region.id,
+    rect: region.rect,
+    originalInk: 0,
+    scanInk: 0,
+    added: 0,
+    removed: 0,
+    filled: false,
+    score: 0
+  };
+  const threshold = region.threshold ?? defaultThreshold;
+  let added = 0;
+  let removed = 0;
+  for (let row = top; row < bottom; row++) {
+    const offset = row * masks.width;
+    for (let column = left; column < right; column++) {
+      const p = offset + column;
+      if (masks.scan.data[p] === 1 && masks.originalDilated.data[p] === 0) added++;
+      if (masks.original.data[p] === 1 && masks.scanDilated.data[p] === 0) removed++;
+    }
+  }
+  const area = (right - left) * (bottom - top);
+  const addedRatio = added / area;
+  return {
+    id: region.id,
+    rect: region.rect,
+    originalInk: coverage(masks.original, left, top, right, bottom),
+    scanInk: coverage(masks.scan, left, top, right, bottom),
+    added: addedRatio,
+    removed: removed / area,
+    filled: addedRatio >= threshold,
+    score: threshold > 0 ? Math.min(1, addedRatio / threshold) : 0
+  };
+}
+
+/**
+ * An RGBA overlay of the comparison, for looking at with your own eyes.
+ *
+ * Red is ink the scan added, blue is ink it lost, grey is ink both agree on.
+ * A correctly aligned pair of a signed form is almost entirely grey with a red
+ * signature; a misaligned one is red and blue confetti along every stroke,
+ * which is the fastest way to tell the two failures apart.
+ */
+async function renderDiff(original, aligned, options = {}) {
+  const {
+    tolerance = 2,
+    ink,
+    faintInk
+  } = options;
+  const masks = await buildMasks(original, aligned, ink, tolerance, faintInk);
+  return paintOverlay(masks);
+}
+/** The overlay, from masks already built. Red added, blue lost, grey agreed, white paper. */
+function paintOverlay(masks) {
+  const {
+    width,
+    height
+  } = masks;
+  const data = new Uint8ClampedArray(width * height * 4);
+  for (let i = 0, p = 0; p < width * height; p++, i += 4) {
+    const inOriginal = masks.original.data[p] === 1;
+    const inScan = masks.scan.data[p] === 1;
+    const nearOriginal = masks.originalDilated.data[p] === 1;
+    let r = 255;
+    let g = 255;
+    let b = 255;
+    if (inScan && !nearOriginal) {
+      r = 220;
+      g = 30;
+      b = 40;
+    } else if (inOriginal && masks.scanDilated.data[p] === 0) {
+      r = 40;
+      g = 90;
+      b = 220;
+    } else if (inOriginal || inScan) {
+      r = 110;
+      g = 110;
+      b = 110;
+    }
+    data[i] = r;
+    data[i + 1] = g;
+    data[i + 2] = b;
+    data[i + 3] = 255;
+  }
+  return {
+    width,
+    height,
+    data
+  };
+}
+
+function mergeBoxes(components, gap) {
+  let boxes = components.map(c => ({
+    ...c,
+    components: 1
+  }));
+  if (boxes.length < 2) return boxes;
+  // Each pass unions everything that touches; a merged box can newly reach
+  // another, so repeat until a pass merges nothing.
+  for (;;) {
+    const merged = mergeOnce(boxes, gap);
+    if (merged.length === boxes.length) return merged;
+    boxes = merged;
+  }
+}
+function mergeOnce(boxes, gap) {
+  const parent = boxes.map((_, i) => i);
+  const find = i => {
+    while (parent[i] !== i) {
+      parent[i] = parent[parent[i]];
+      i = parent[i];
+    }
+    return i;
+  };
+  const cell = Math.max(16, gap * 2);
+  const grid = new Map();
+  for (const [i, box] of boxes.entries()) {
+    for (const key of cellsOf(box, gap, cell)) {
+      const bucket = grid.get(key);
+      if (bucket === undefined) grid.set(key, [i]);else bucket.push(i);
+    }
+  }
+  for (const bucket of grid.values()) for (let a = 0; a < bucket.length; a++) for (let b = a + 1; b < bucket.length; b++) {
+    const i = bucket[a];
+    const j = bucket[b];
+    if (find(i) !== find(j) && near(boxes[i], boxes[j], gap)) parent[find(j)] = find(i);
+  }
+  const groups = new Map();
+  for (const [i, box] of boxes.entries()) {
+    const root = find(i);
+    const group = groups.get(root);
+    if (group === undefined) {
+      groups.set(root, {
+        ...box
+      });
+      continue;
+    }
+    const right = Math.max(group.x + group.width, box.x + box.width);
+    const bottom = Math.max(group.y + group.height, box.y + box.height);
+    group.x = Math.min(group.x, box.x);
+    group.y = Math.min(group.y, box.y);
+    group.width = right - group.x;
+    group.height = bottom - group.y;
+    group.pixels += box.pixels;
+    group.components += box.components;
+  }
+  return [...groups.values()];
+}
+/** Do two boxes come within `gap` pixels of each other? Touching or overlapping counts. */
+function near(a, b, gap) {
+  return a.x - gap <= b.x + b.width && b.x - gap <= a.x + a.width && a.y - gap <= b.y + b.height && b.y - gap <= a.y + a.height;
+}
+/** Grid cells covered by a box inflated by the gap. */
+function cellsOf(box, gap, cell) {
+  const x0 = Math.floor((box.x - gap) / cell);
+  const y0 = Math.floor((box.y - gap) / cell);
+  const x1 = Math.floor((box.x + box.width + gap) / cell);
+  const y1 = Math.floor((box.y + box.height + gap) / cell);
+  const keys = [];
+  for (let cy = y0; cy <= y1; cy++) for (let cx = x0; cx <= x1; cx++) keys.push(`${cx},${cy}`);
+  return keys;
+}
+
+const NONE = {
+  pixels: 0,
+  changes: 0,
+  largest: 0,
+  bounds: null,
+  edgeTouch: 0,
+  fill: 0
+};
+/** Analyse `added` (the page's new-ink mask) inside `rect` (page pixels). */
+function measureRegionInk(added, rect, options) {
+  const left = Math.max(0, Math.floor(rect.x));
+  const top = Math.max(0, Math.floor(rect.y));
+  const right = Math.min(added.width, Math.ceil(rect.x + rect.width));
+  const bottom = Math.min(added.height, Math.ceil(rect.y + rect.height));
+  const width = right - left;
+  const height = bottom - top;
+  if (width <= 0 || height <= 0) return {
+    ...NONE,
+    formLines: 0
+  };
+  const crop = new Uint8Array(width * height);
+  for (let y = 0; y < height; y++) crop.set(added.data.subarray((top + y) * added.width + left, (top + y) * added.width + right), y * width);
+  const {
+    components,
+    labels
+  } = labelComponents({
+    width,
+    height,
+    data: crop
+  });
+  const isRule = c => {
+    const horizontal = c.width >= options.lineSpan * width && c.height <= Math.max(options.lineThickness, options.lineThicknessRatio * height);
+    const vertical = c.height >= options.lineSpan * height && c.width <= Math.max(options.lineThickness, options.lineThicknessRatio * width);
+    return horizontal || vertical;
+  };
+  const pieces = components.filter(c => c.pixels >= 2);
+  const rules = pieces.filter(c => isRule(c));
+  const kept = pieces.filter(c => !isRule(c));
+  const changes = mergeBoxes(kept, options.mergeGap).filter(box => box.pixels >= options.minChangePixels);
+  if (changes.length === 0) return {
+    ...NONE,
+    formLines: rules.length
+  };
+  // A kept piece belongs to the change whose box holds it: a change's box is the
+  // union of its pieces, and any piece inside it would have been merged into it.
+  const counts = new Uint8Array(components.length);
+  for (const [i, c] of components.entries()) {
+    if (c.pixels < 2 || isRule(c)) continue;
+    counts[i] = changes.some(box => c.x >= box.x && c.y >= box.y && c.x + c.width <= box.x + box.width && c.y + c.height <= box.y + box.height) ? 1 : 0;
+  }
+  const band = Math.max(1, Math.round(Math.min(width, height) * options.edgeBand));
+  let pixels = 0;
+  let edge = 0;
+  for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
+    const label = labels[y * width + x];
+    if (label === 0 || counts[label - 1] === 0) continue;
+    pixels++;
+    if (x < band || y < band || x >= width - band || y >= height - band) edge++;
+  }
+  const minX = Math.min(...changes.map(b => b.x));
+  const minY = Math.min(...changes.map(b => b.y));
+  const maxX = Math.max(...changes.map(b => b.x + b.width));
+  const maxY = Math.max(...changes.map(b => b.y + b.height));
+  return {
+    pixels,
+    changes: changes.length,
+    largest: Math.max(...changes.map(b => b.pixels)),
+    bounds: {
+      x: left + minX,
+      y: top + minY,
+      width: maxX - minX,
+      height: maxY - minY
+    },
+    edgeTouch: pixels > 0 ? edge / pixels : 0,
+    fill: pixels / (width * height),
+    formLines: rules.length
+  };
+}
+
+/**
+ * The original and the aligned scan next to each other, with the same boxes on
+ * both: what was expected, what changed, what went missing.
+ *
+ * The overlay answers "which pixels changed"; this answers "show me", for the
+ * person who has to agree with the verdict. Because the scan is aligned onto
+ * the original's canvas, a box drawn at the same place on each half surrounds
+ * the same part of the page in both, so the eye goes straight from the empty
+ * field on the left to the signature on the right.
+ */
+/** Separator between the halves: mid grey, so it shows against white paper and a grey scan alike. */
+const GUTTER = [150, 150, 150, 255];
+function composeSideBySide(original, aligned, annotations, thickness, gutter) {
+  const offset = original.width + gutter;
+  const result = createRaster(offset + aligned.width, Math.max(original.height, aligned.height));
+  paste(result, original, 0);
+  paste(result, aligned, offset);
+  for (let y = 0; y < result.height; y++) for (let x = original.width; x < offset; x++) result.data.set(GUTTER, (y * result.width + x) * 4);
+  annotateOverlay(result, annotations, thickness);
+  annotateOverlay(result, annotations.map(a => ({
+    ...a,
+    rect: {
+      ...a.rect,
+      x: a.rect.x + offset
+    }
+  })), thickness);
+  return result;
+}
+function paste(target, source, left) {
+  const rowBytes = source.width * 4;
+  for (let y = 0; y < source.height; y++) target.data.set(source.data.subarray(y * rowBytes, (y + 1) * rowBytes), (y * target.width + left) * 4);
+}
+
+/**
+ * What changed on each page, and whether it was supposed to.
+ *
+ * The overlay is the detection: the original's ink, fattened by a tolerance band,
+ * subtracted from the aligned scan, leaves the ink the scan added. What this adds
+ * is the reporting. What changed is grouped into changes - labelled, merged
+ * across small gaps, filtered below a physical size. A change whose ink lies
+ * mostly in an expected region belongs to that region; every other change is
+ * unexpected. Each region is also analysed on its own - its new ink grouped,
+ * its printed rules discarded, the rest measured - and is identified once that
+ * ink adds up to `minFillArea` without covering more than `maxFill` of it. The
+ * same grouping is done for ink the scan lost.
+ *
+ * Masks are built once per page and read four ways: the overlay, the expected
+ * regions, the added changes and the missing ones.
+ */
+async function diffPages(pages, expected = [], options = {}) {
+  const {
+    onProgress
+  } = options;
+  const results = [];
+  for (const [position, page] of pages.entries()) {
+    const index = position + 1;
+    const started = Date.now();
+    onProgress?.({
+      stage: 'diff',
+      phase: 'start',
+      page: page.page,
+      index,
+      total: pages.length
+    });
+    const result = await diffPage(page, expected.filter(e => e.page === page.page), options);
+    results.push(result);
+    onProgress?.({
+      stage: 'diff',
+      phase: 'done',
+      page: page.page,
+      index,
+      total: pages.length,
+      durationMs: Date.now() - started,
+      detail: {
+        ...result.summary,
+        truncated: result.truncated
+      }
+    });
+  }
+  return results;
+}
+/** One page. `expected` should already be the regions for this page. */
+async function diffPage(page, expected = [], options = {}) {
+  const {
+    units = 'points',
+    tolerance = 2,
+    minFillArea = 2,
+    maxFill = 0.5,
+    formLineSpan = 0.9,
+    formLineThickness = 0.6,
+    minChangeArea = 1,
+    minMissingArea = 4,
+    faintInk,
+    mergeGap = 3,
+    assumeDpi = 150,
+    regionOverlap = 0.5,
+    maxChanges = 50,
+    output = 'png',
+    annotate = false,
+    sideBySide = false,
+    ink
+  } = options;
+  const dpi = page.original.dpi ?? assumeDpi;
+  const toPixels = units === 'points' ? dpi / 72 : 1;
+  const pixelsPerMm = dpi / 25.4;
+  const mm2PerPixel = 1 / (pixelsPerMm * pixelsPerMm);
+  const masks = await buildMasks(page.original.raster, page.aligned.raster, ink, tolerance, faintInk);
+  const regions = expected.map(e => ({
+    id: e.id,
+    rect: scaleRect(e, toPixels)
+  }));
+  const findChanges = (mask, minArea) => {
+    const components = connectedComponents(mask).filter(c => c.pixels >= 2);
+    const merged = mergeBoxes(components, Math.round(mergeGap * pixelsPerMm));
+    return merged.filter(box => box.pixels * mm2PerPixel >= minArea).toSorted((a, b) => b.pixels - a.pixels);
+  };
+  const addedMask = difference(masks.scan, masks.originalDilated);
+  const added = findChanges(addedMask, minChangeArea);
+  const outside = added.filter(box => regions.every(r => inkShareInside(box, r.rect, masks) < regionOverlap));
+  const lost = findChanges(difference(masks.original, masks.scanDilated), minMissingArea);
+  const expectedResults = regions.map((region, i) => {
+    const measured = measureRegionInk(addedMask, region.rect, {
+      mergeGap: Math.round(mergeGap * pixelsPerMm),
+      minChangePixels: minChangeArea / mm2PerPixel,
+      lineSpan: formLineSpan,
+      lineThickness: formLineThickness * pixelsPerMm,
+      lineThicknessRatio: 0.04,
+      edgeBand: 0.03
+    });
+    const addedInk = measured.pixels * mm2PerPixel;
+    const overfilled = measured.fill > maxFill;
+    const {
+      removed
+    } = measureRegion(region, masks, 0);
+    const bounds = measured.bounds && scaleRect(measured.bounds, 1 / toPixels);
+    return {
+      id: region.id,
+      identified: addedInk >= minFillArea && !overfilled,
+      x: expected[i].x,
+      y: expected[i].y,
+      width: expected[i].width,
+      height: expected[i].height,
+      addedInk,
+      removedInk: removed * pixelArea(region.rect, masks) * mm2PerPixel,
+      score: minFillArea > 0 ? Math.min(1, addedInk / minFillArea) : 1,
+      overfilled,
+      ink: {
+        changes: measured.changes,
+        largestArea: measured.largest * mm2PerPixel,
+        bounds,
+        widthRatio: bounds ? bounds.width / expected[i].width : 0,
+        heightRatio: bounds ? bounds.height / expected[i].height : 0,
+        edgeTouch: measured.edgeTouch,
+        fill: measured.fill,
+        formLines: measured.formLines
+      }
+    };
+  });
+  const truncated = outside.length > maxChanges || lost.length > maxChanges;
+  const toChange = box => ({
+    x: box.x / toPixels,
+    y: box.y / toPixels,
+    width: box.width / toPixels,
+    height: box.height / toPixels,
+    inkArea: box.pixels * mm2PerPixel,
+    pixels: box.pixels
+  });
+  const unexpected = outside.slice(0, maxChanges).map(box => toChange(box));
+  const missing = lost.slice(0, maxChanges).map(box => toChange(box));
+  const reported = [...regions.map((region, i) => ({
+    rect: grow(region.rect, 2),
+    color: expectedResults[i].identified ? IDENTIFIED : NOT_IDENTIFIED
+  })), ...outside.slice(0, maxChanges).map(box => ({
+    rect: grow(box, 4),
+    color: UNEXPECTED
+  }))];
+  const diffRaster = paintOverlay(masks);
+  if (annotate) annotateOverlay(diffRaster, reported);
+  // Lines about a point thick at any dpi, so the boxes read the same on every page.
+  const sideBySideRaster = sideBySide ? composeSideBySide(page.original.raster, page.aligned.raster, [...reported, ...lost.slice(0, maxChanges).map(box => ({
+    rect: grow(box, 4),
+    color: MISSING
+  }))], Math.max(2, Math.round(dpi / 72)), Math.max(4, Math.round(dpi / 12))) : null;
+  const whole = measureRegion({
+    id: '__page__',
+    rect: {
+      x: 0,
+      y: 0,
+      width: masks.width,
+      height: masks.height
+    }
+  }, masks, 0);
+  const identified = expectedResults.filter(r => r.identified).length;
+  return {
+    page: page.page,
+    diffRaster,
+    diffImage: output === 'none' ? null : await encodeImage(diffRaster, {
+      format: output
+    }),
+    sideBySideRaster,
+    sideBySideImage: sideBySideRaster === null || output === 'none' ? null : await encodeImage(sideBySideRaster, {
+      format: output
+    }),
+    expected: expectedResults,
+    unexpected,
+    missing,
+    truncated,
+    summary: {
+      addedInk: whole.added,
+      removedInk: whole.removed,
+      identified,
+      notIdentified: expectedResults.length - identified,
+      unexpected: unexpected.length,
+      missing: missing.length
+    }
+  };
+}
+/** Set where `a` is set and `b` is not. */
+function difference(a, b) {
+  const data = new Uint8Array(a.data.length);
+  for (let p = 0; p < data.length; p++) data[p] = a.data[p] === 1 && b.data[p] === 0 ? 1 : 0;
+  return {
+    width: a.width,
+    height: a.height,
+    data
+  };
+}
+/**
+ * Share of a change's new ink that falls inside a region.
+ *
+ * Measured on ink, not on box area: a signature that overflows its box by a
+ * flourish is still mostly inside it, while its bounding box may not be.
+ */
+function inkShareInside(box, region, masks) {
+  const left = Math.max(box.x, Math.floor(region.x));
+  const top = Math.max(box.y, Math.floor(region.y));
+  const right = Math.min(box.x + box.width, Math.ceil(region.x + region.width));
+  const bottom = Math.min(box.y + box.height, Math.ceil(region.y + region.height));
+  if (right <= left || bottom <= top) return 0;
+  let inside = 0;
+  for (let y = top; y < bottom; y++) {
+    const row = y * masks.width;
+    for (let x = left; x < right; x++) if (masks.scan.data[row + x] === 1 && masks.originalDilated.data[row + x] === 0) inside++;
+  }
+  // The count here includes isolated pixels the component filter dropped from
+  // box.pixels, so it can nudge past one.
+  return box.pixels > 0 ? Math.min(1, inside / box.pixels) : 0;
+}
+/** Pixels of a region that lie on the page - what `measureRegion`'s shares are shares of. */
+function pixelArea(rect, masks) {
+  const width = Math.min(masks.width, Math.ceil(rect.x + rect.width)) - Math.max(0, Math.floor(rect.x));
+  const height = Math.min(masks.height, Math.ceil(rect.y + rect.height)) - Math.max(0, Math.floor(rect.y));
+  return Math.max(0, width) * Math.max(0, height);
+}
+function scaleRect(rect, factor) {
+  return {
+    x: rect.x * factor,
+    y: rect.y * factor,
+    width: rect.width * factor,
+    height: rect.height * factor
+  };
+}
+function grow(rect, by) {
+  return {
+    x: rect.x - by,
+    y: rect.y - by,
+    width: rect.width + 2 * by,
+    height: rect.height + 2 * by
+  };
+}
+
+export { IDENTIFIED, MISSING, NOT_IDENTIFIED, UNEXPECTED, annotateOverlay, buildMasks, compareRegions, composeSideBySide, connectedComponents, diffDocument, diffPage, diffPages, labelComponents, measureRegion, measureRegionInk, mergeBoxes, paintOverlay, renderDiff };
+//# sourceMappingURL=index.esm.js.map