image-js 1.0.0 → 1.2.0

package/lib/utils/geometry/removeClosePoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"removeClosePoints.js","sourceRoot":"","sources":["../../../src/utils/geometry/removeClosePoints.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAe,EACf,KAAY,EACZ,OAAiC;IAEjC,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC;IACxC,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,IAAI,SAAS,CAAC;IAExC,IAAI,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;QACzD,MAAM,IAAI,KAAK,CACb,qEAAqE,CACtE,CAAC;IACJ,CAAC;IACD,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzE,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjD,IACE,IAAI,CAAC,KAAK,CACR,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/C,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,CAC1C,GAAG,QAAQ,EACZ,CAAC;oBACD,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC1B,CAAC,EAAE,CAAC;gBACN,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,SAAS,OAAO,CAAC,KAAY,EAAE,OAAe,EAAE,YAAqB;IACnE,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,SAAS,cAAc,CAAC,CAAQ,EAAE,CAAQ;YAC/C,OAAO,CACL,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;gBACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CACzC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,aAAa,CAAC,CAAQ,EAAE,CAAQ;YAC9C,OAAO,CACL,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;gBACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CACzC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}
+{"version":3,"file":"removeClosePoints.js","sourceRoot":"","sources":["../../../src/utils/geometry/removeClosePoints.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAe,EACf,KAAY,EACZ,OAAiC;IAEjC,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC;IACxC,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,IAAI,SAAS,CAAC;IAExC,IAAI,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;QACzD,MAAM,IAAI,KAAK,CACb,qEAAqE,CACtE,CAAC;IACJ,CAAC;IACD,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;IACpC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAElD,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjD,IACE,IAAI,CAAC,KAAK,CACR,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/C,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,CAC1C,GAAG,QAAQ,EACZ,CAAC;oBACD,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC1B,CAAC,EAAE,CAAC;gBACN,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,SAAS,OAAO,CAAC,KAAY,EAAE,OAAe,EAAE,YAAqB;IACnE,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,SAAS,cAAc,CAAC,CAAQ,EAAE,CAAQ;YAC/C,OAAO,CACL,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;gBACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CACzC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,SAAS,aAAa,CAAC,CAAQ,EAAE,CAAQ;YAC9C,OAAO,CACL,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;gBACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CACzC,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}

package/lib/utils/setBlendedPixel.d.ts

@@ -5,7 +5,7 @@ import type { Mask } from '../Mask.js';
  * @param image - The image with which to blend.
  * @param column - Column of the target pixel.
  * @param row - Row of the target pixel.
- * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+ * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
  */
 export declare function setBlendedPixel(image: Image | Mask, column: number, row: number, color?: number[]): void;
 //# sourceMappingURL=setBlendedPixel.d.ts.map

package/lib/utils/setBlendedPixel.js

@@ -6,7 +6,7 @@ import { assert } from './validators/assert.js';
  * @param image - The image with which to blend.
  * @param column - Column of the target pixel.
  * @param row - Row of the target pixel.
- * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+ * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
  */
 export function setBlendedPixel(image, column, row, color) {
     color = color ?? getDefaultColor(image);

package/lib/utils/setBlendedVisiblePixel.d.ts

@@ -5,7 +5,7 @@ import type { Mask } from '../Mask.js';
  * @param image - The image with which to blend.
  * @param column - Column of the target pixel.
  * @param row - Row of the target pixel.
- * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+ * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
  */
 export declare function setBlendedVisiblePixel(image: Image | Mask, column: number, row: number, color?: number[]): void;
 //# sourceMappingURL=setBlendedVisiblePixel.d.ts.map

package/lib/utils/setBlendedVisiblePixel.js

@@ -4,7 +4,7 @@ import { setBlendedPixel } from './setBlendedPixel.js';
  * @param image - The image with which to blend.
  * @param column - Column of the target pixel.
  * @param row - Row of the target pixel.
- * @param color - Color with which to blend the image pixel. @default `'Opaque black'`.
+ * @param color - Color with which to blend the image pixel. Default: `Opaque black`.
  */
 export function setBlendedVisiblePixel(image, column, row, color) {
     if (column >= 0 && column < image.width && row >= 0 && row < image.height) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-js",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "Image processing and manipulation in JavaScript",
   "author": "Michaël Zasso",
@@ -12,15 +12,18 @@
     "lib",
     "src"
   ],
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": "./lib/index.js",
-    "./ssim": "./lib/ssim/index.js"
+    "./full": "./lib/index_full.js",
+    "./draw": "./lib/extra/draw/index.js",
+    "./ssim": "./lib/extra/ssim/index.js"
   },
   "scripts": {
     "api-extractor": "rimraf dist-types && api-extractor run --local",
     "build": "npm run tsc && npm run cheminfo-build",
     "check-types": "tsc --noEmit",
-    "cheminfo-build": "cheminfo-build --entry lib/index.js --root IJS",
+    "cheminfo-build": "cheminfo-build --entry lib/index_browser.js --root IJS",
     "clean": "rimraf coverage dist dist-types lib",
     "demo": "vite --open",
     "eslint": "eslint . --cache",
@@ -34,7 +37,7 @@
     "tsc-build": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "bresenham-zingl": "^0.2.0",
+    "bresenham-zingl": "^0.2.5",
     "colord": "^2.9.3",
     "fast-bmp": "^4.0.1",
     "fast-jpeg": "^3.0.1",
@@ -49,47 +52,58 @@
     "ml-ransac": "^1.0.0",
     "ml-regression-multivariate-linear": "^2.0.4",
     "ml-regression-polynomial-2d": "^1.0.0",
-    "ml-spectra-processing": "^14.17.0",
+    "ml-spectra-processing": "^14.18.0",
     "robust-point-in-polygon": "^1.0.3",
+    "skia-canvas": "^3.0.8",
     "ssim.js": "^3.5.0",
-    "tiff": "^7.1.1",
-    "ts-pattern": "^5.8.0",
+    "tiff": "^7.1.2",
+    "ts-pattern": "^5.9.0",
     "uint8-base64": "^1.0.0"
   },
+  "lavamoat": {
+    "allowScripts": {
+      "@lavamoat/preinstall-always-fail": false,
+      "skia-canvas": true,
+      "vite>esbuild": false
+    }
+  },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.10",
+    "@lavamoat/allow-scripts": "^3.4.0",
+    "@lavamoat/preinstall-always-fail": "^2.1.1",
+    "@microsoft/api-extractor": "^7.53.3",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.1.12",
+    "@tailwindcss/vite": "^4.1.16",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/js-priority-queue": "^0.0.9",
-    "@types/node": "^24.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/node": "^24.9.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@types/robust-point-in-polygon": "^1.0.4",
-    "@vitejs/plugin-react": "^5.0.1",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/expect": "^3.2.4",
+    "@types/skia-canvas": "^0.9.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/coverage-v8": "^4.0.6",
+    "@vitest/expect": "^4.0.6",
     "@zakodium/tsconfig": "^1.0.2",
     "autoprefixer": "^10.4.21",
-    "cheminfo-build": "^1.3.0",
+    "cheminfo-build": "^1.3.1",
     "clsx": "^2.1.1",
-    "cross-env": "^10.0.0",
-    "eslint": "^9.33.0",
-    "eslint-config-cheminfo-react": "^17.0.1",
-    "eslint-config-cheminfo-typescript": "^19.0.0",
-    "immer": "^10.1.1",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.38.0",
+    "eslint-config-cheminfo-react": "^18.0.1",
+    "eslint-config-cheminfo-typescript": "^20.0.0",
+    "immer": "^10.2.0",
     "jest-image-snapshot": "^6.5.1",
     "jest-matcher-deep-close-to": "^3.0.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.8.1",
-    "rimraf": "^6.0.1",
-    "tailwindcss": "^4.1.12",
-    "typescript": "~5.9.2",
-    "vite": "^7.1.3",
-    "vitest": "^3.2.4"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5",
+    "rimraf": "^6.1.0",
+    "tailwindcss": "^4.1.16",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.6"
   },
   "repository": {
     "type": "git",

package/src/Mask.ts

@@ -328,7 +328,7 @@ export class Mask {
 
   /**
    * Get the number of pixels that do not have the value 0.
-   * @returns
+   * @returns The number of non-zero pixels.
    */
   public getNbNonZeroPixels(): number {
     let count = 0;

package/src/draw/drawLineOnImage.ts

@@ -50,7 +50,6 @@ export function drawLineOnImage(
   checkProcessable(newImage, {
     bitDepth: [8, 16],
   });
-
   line(
     Math.round(origin.column + from.column),
     Math.round(origin.row + from.row),

package/src/extra/draw/draw_text.ts

@@ -0,0 +1,194 @@
+import type { CanvasRenderingContext2D as SkiaCanvasRenderingContext2D } from 'skia-canvas';
+
+import type { Image, ImageDataArray } from '../../Image.ts';
+import type { Point } from '../../geometry/index.ts';
+import { getCanvasContext } from '../../utils/cross_platform.ts';
+import { getOutputImage } from '../../utils/getOutputImage.ts';
+import { validateValues } from '../../utils/validators/validators.ts';
+
+export interface DrawTextLabel {
+  /**
+   * Text of the label.
+   */
+  content: number | string;
+  /**
+   * Position to draw the label at.
+   */
+  position: Point;
+  /**
+   *  Size and type of font.
+   *  If specified, this overrides the general font from DrawTextOptions.
+   */
+  font?: string;
+  /**
+   *  Font color. Should be in rgba8 format.
+   *  If specified, this overrides the general fontColor from DrawTextOptions.
+   */
+  fontColor?: number[];
+}
+
+export interface DrawTextOptions {
+  /**
+   *  General size and type of font.
+   *  Used as the default when font is not specified in individual text labels.
+   */
+  font?: string;
+  /**
+   *  General font color.
+   *  Used as the default when fontColor is not specified in individual text labels.
+   */
+  fontColor?: number[];
+  /**
+   * Image to which the resulting image has to be put.
+   */
+  out?: Image;
+}
+
+/**
+ * Draws text on an image.
+ * @param image - Image to write text on.
+ * @param text - Text to write on the image.
+ * @param options - Out Options
+ * @returns Image with drawn text.
+ */
+export function drawText(
+  image: Image,
+  text: DrawTextLabel | DrawTextLabel[],
+  options?: DrawTextOptions,
+) {
+  if (Array.isArray(text) && text.length === 0) {
+    throw new Error('At least one text element must be provided');
+  }
+
+  const newImage = getOutputImage(image, options, { clone: true });
+  const defaultFont = options?.font ?? '12px Helvetica';
+  const defaultColor = options?.fontColor ?? [255, 255, 255, 255];
+
+  const ctx = getCanvasContext(image.width, image.height);
+  if (!Array.isArray(text)) {
+    drawTextElement(image, ctx, text, defaultFont, defaultColor);
+  } else {
+    for (const label of text) {
+      drawTextElement(image, ctx, label, defaultFont, defaultColor);
+    }
+  }
+
+  layerCanvas(
+    newImage.getRawImage().data,
+    ctx.getImageData(0, 0, image.width, image.height).data,
+    image.channels,
+    image.bitDepth,
+  );
+
+  return newImage;
+}
+
+function drawTextElement(
+  image: Image,
+  ctx: OffscreenCanvasRenderingContext2D | SkiaCanvasRenderingContext2D,
+  text: DrawTextLabel,
+  defaultFont: string,
+  defaultColor: number[],
+) {
+  ctx.font = text.font ?? defaultFont;
+  const fontColor = text.fontColor ?? defaultColor;
+  validateValues(fontColor, image);
+  const alpha = fontColor[3] ? fontColor[3] / 255 : 1;
+  const normalizedColor = [
+    fontColor[0] ?? 0,
+    fontColor[1] ?? 0,
+    fontColor[2] ?? 0,
+    alpha,
+  ];
+  ctx.fillStyle = `rgba(${normalizedColor.join(',')})`;
+  ctx.fillText(String(text.content), text.position.column, text.position.row);
+}
+
+/**
+ * Draws labels on the image data from canvas.
+ * @param imageData - Image data to draw text on.
+ * @param canvasData - Canvas data to draw on the image.
+ * @param numberOfChannels - Number of channels of the initial image.
+ * @param bitDepth - Bit depth of the initial image.
+ */
+function layerCanvas(
+  imageData: ImageDataArray,
+  canvasData: Uint8ClampedArray,
+  numberOfChannels: number,
+  bitDepth: number,
+) {
+  const config = CHANNEL_CONFIGS[numberOfChannels] || CHANNEL_CONFIGS[1];
+  const pixelCount = canvasData.length >>> 2;
+  const bitShift = bitDepth - 8;
+
+  let imageIndex = 0;
+  let canvasIndex = 0;
+
+  for (let pixel = 0; pixel < pixelCount; pixel++) {
+    const canvasAlpha = canvasData[canvasIndex + 3] / 255;
+
+    // Skip transparent canvas pixels completely
+    if (canvasAlpha === 0) {
+      imageIndex += numberOfChannels;
+      canvasIndex += 4;
+      continue;
+    }
+
+    const invAlpha = 1 - canvasAlpha;
+
+    for (const channel of config.channelOffsets) {
+      const targetIndex = imageIndex + channel;
+      imageData[targetIndex] =
+        Math.round(
+          canvasData[canvasIndex + channel] * canvasAlpha +
+            imageData[targetIndex] * invAlpha,
+        ) << bitShift;
+    }
+    if (config.hasAlpha) {
+      const alphaIndex = imageIndex + (config.alphaOffset as number);
+      const imageAlpha = (imageData[alphaIndex] >>> bitShift) / 255;
+
+      const newAlpha = canvasAlpha + imageAlpha * (1 - canvasAlpha);
+      imageData[alphaIndex] = Math.round(newAlpha * 255) << bitShift;
+    }
+
+    imageIndex += numberOfChannels;
+    canvasIndex += 4;
+  }
+}
+
+/**
+ * Configuration for different channel numbers when layering canvas with onto destination image.
+ */
+interface ChannelConfig {
+  channelOffsets: number[];
+  hasAlpha: boolean;
+  alphaOffset: number | undefined; // Required when hasAlpha is true
+}
+
+const CHANNEL_CONFIGS: Record<number, ChannelConfig> = {
+  // GREY
+  1: {
+    channelOffsets: [0],
+    hasAlpha: false,
+    alphaOffset: undefined,
+  },
+  // GREYA
+  2: {
+    channelOffsets: [0],
+    hasAlpha: true,
+    alphaOffset: 1,
+  },
+  3: {
+    // RGB
+    channelOffsets: [0, 1, 2],
+    hasAlpha: false,
+    alphaOffset: undefined,
+  },
+  4: {
+    // RGBA
+    channelOffsets: [0, 1, 2],
+    hasAlpha: true,
+    alphaOffset: 3,
+  },
+};

package/src/extra/draw/index.ts

@@ -0,0 +1,2 @@
+export * from './draw_text.ts';
+export * from '../../draw/index.ts';

package/src/{ssim → extra/ssim}/compute_dssim.ts

@@ -1,7 +1,7 @@
-import type { Image } from '../Image.js';
+import type { Image } from '../../Image.ts';
 
-import type { SsimOptions } from './compute_ssim.js';
-import { computeSsim } from './compute_ssim.js';
+import type { SsimOptions } from './compute_ssim.ts';
+import { computeSsim } from './compute_ssim.ts';
 
 /**
  * Compute the Structural Dissimilarity (DSSIM) of two GREY images.

package/src/{ssim → extra/ssim}/compute_ssim.ts

@@ -1,8 +1,8 @@
 import { ssim as bufferSsim } from 'ssim.js';
 
-import type { Image } from '../Image.js';
-import checkProcessable from '../utils/validators/checkProcessable.js';
-import { validateForComparison } from '../utils/validators/validators.js';
+import type { Image } from '../../Image.ts';
+import checkProcessable from '../../utils/validators/checkProcessable.ts';
+import { validateForComparison } from '../../utils/validators/validators.ts';
 
 export interface SsimOptions {
   /**

package/src/extra/ssim/index.ts

@@ -0,0 +1,2 @@
+export * from './compute_dssim.ts';
+export * from './compute_ssim.ts';

package/src/featureMatching/matching/filterEuclideanDistance.ts

@@ -28,9 +28,8 @@ export function filterEuclideanDistance(
 ): Match[] {
   const { origin = { column: 0, row: 0 } } = options;
 
-  const sorted = matches.sort(
-    (a, b) => a.destinationIndex - b.destinationIndex,
-  );
+  const sorted = matches.slice();
+  sorted.sort((a, b) => a.destinationIndex - b.destinationIndex);
 
   const result: Match[] = [];
   let sameDestMatches: Match[] = [];
@@ -39,21 +38,15 @@ export function filterEuclideanDistance(
     if (match.destinationIndex === currentIndex) {
       sameDestMatches.push(match);
     } else {
-      result.push(
-        ...sameDestMatches
-          .sort((a, b) => distanceSquared(a) - distanceSquared(b))
-          .slice(0, 1),
-      );
+      sameDestMatches.sort((a, b) => distanceSquared(a) - distanceSquared(b));
+      result.push(...sameDestMatches.slice(0, 1));
 
       currentIndex = match.destinationIndex;
       sameDestMatches = [match];
     }
   }
-  result.push(
-    ...sameDestMatches
-      .sort((a, b) => distanceSquared(a) - distanceSquared(b))
-      .slice(0, 1),
-  );
+  sameDestMatches.sort((a, b) => distanceSquared(a) - distanceSquared(b));
+  result.push(...sameDestMatches.slice(0, 1));
   return result;
 
   function distanceSquared(match: Match): number {

package/src/featureMatching/matching/filterSmallestDistanceMatches.ts

@@ -7,9 +7,8 @@ import type { Match } from './bruteForceMatch.js';
  * @returns Only the matches from source to destination with the smallest distance.
  */
 export function filterSmallestDistanceMatches(matches: Match[]): Match[] {
-  const sorted = matches.sort(
-    (a, b) => a.destinationIndex - b.destinationIndex,
-  );
+  const sorted = matches.slice();
+  sorted.sort((a, b) => a.destinationIndex - b.destinationIndex);
 
   const result: Match[] = [];
   let sameDestMatches: Match[] = [];
@@ -18,16 +17,14 @@ export function filterSmallestDistanceMatches(matches: Match[]): Match[] {
     if (match.destinationIndex === currentIndex) {
       sameDestMatches.push(match);
     } else {
-      result.push(
-        ...sameDestMatches.sort((a, b) => a.distance - b.distance).slice(0, 1),
-      );
+      sameDestMatches.sort((a, b) => a.distance - b.distance);
+      result.push(...sameDestMatches.slice(0, 1));
 
       currentIndex = match.destinationIndex;
       sameDestMatches = [match];
     }
   }
-  result.push(
-    ...sameDestMatches.sort((a, b) => a.distance - b.distance).slice(0, 1),
-  );
+  sameDestMatches.sort((a, b) => a.distance - b.distance);
+  result.push(...sameDestMatches.slice(0, 1));
   return result;
 }

package/src/featureMatching/utils/sortByDistance.ts

@@ -6,7 +6,9 @@ import type { Match } from '../matching/bruteForceMatch.js';
  * @returns Sorted copy of the array of matches.
  */
 export function sortByDistance(matches: Match[]): Match[] {
-  return matches.slice().sort((match1, match2) => {
+  const sorted = matches.slice();
+  sorted.sort((match1, match2) => {
     return match1.distance - match2.distance;
   });
+  return sorted;
 }

package/src/featureMatching/utils/sortBySourceDest.ts

@@ -6,11 +6,13 @@ import type { Match } from '../matching/bruteForceMatch.js';
  * @returns Sorted copy of the array of matches.
  */
 export function sortBySourceDest(matches: Match[]): Match[] {
-  return matches.slice().sort((match1, match2) => {
+  const sorted = matches.slice();
+  sorted.sort((match1, match2) => {
     if (match1.sourceIndex < match2.sourceIndex) return -1;
     if (match1.sourceIndex > match2.sourceIndex) return 1;
     return match1.destinationIndex - match2.destinationIndex;
   });
+  return sorted;
 }
 
 /**
@@ -19,9 +21,11 @@ export function sortBySourceDest(matches: Match[]): Match[] {
  * @returns Sorted copy of the array of matches.
  */
 export function sortByDestSource(matches: Match[]): Match[] {
-  return matches.slice().sort((match1, match2) => {
+  const sorted = matches.slice();
+  sorted.sort((match1, match2) => {
     if (match1.destinationIndex < match2.destinationIndex) return -1;
     if (match1.destinationIndex > match2.destinationIndex) return 1;
     return match1.sourceIndex - match2.sourceIndex;
   });
+  return sorted;
 }

package/src/index_browser.ts

@@ -0,0 +1,4 @@
+// API for the browser build.
+// TODO: figure out how to bundle the SSIM library. Then we can just use `index_full.ts` instead.
+export * from './index.ts';
+export * from './extra/draw/index.ts';

package/src/index_full.ts

@@ -0,0 +1,4 @@
+// Full API.
+export * from './index.ts';
+export * from './extra/draw/index.ts';
+export * from './extra/ssim/index.ts';

package/src/load/decode.ts

@@ -3,10 +3,10 @@ import { match } from 'ts-pattern';
 
 import type { Image } from '../Image.js';
 
+import { decodeBmp } from './decodeBmp.ts';
 import { decodeJpeg } from './decodeJpeg.js';
 import { decodePng } from './decodePng.js';
 import { decodeTiff } from './decodeTiff.js';
-
 /**
  * Decode input data. Data format is automatically detected.
  * Possible formats: png, jpeg and tiff.
@@ -24,6 +24,7 @@ export function decode(data: ArrayBufferView): Image {
     .with({ mime: 'image/png' }, () => decodePng(typedArray))
     .with({ mime: 'image/jpeg' }, () => decodeJpeg(typedArray))
     .with({ mime: 'image/tiff' }, () => decodeTiff(typedArray))
+    .with({ mime: 'image/bmp' }, () => decodeBmp(typedArray))
     .otherwise(() => {
       throw new RangeError(`invalid data format: ${type?.mime}`);
     });

package/src/load/decodeBmp.ts

@@ -0,0 +1,37 @@
+import { decode } from 'fast-bmp';
+
+import { Image } from '../Image.ts';
+import { Mask } from '../Mask.ts';
+import type { ImageColorModel } from '../utils/constants/colorModels.ts';
+
+/**
+ * Decode a BMP. See the fast-bmp npm module.
+ * @param data - The data to decode.
+ * @returns The decoded image or mask.
+ */
+export function decodeBmp(data: Uint8Array): Image {
+  const decodedData = decode(data);
+  if (decodedData.bitsPerPixel === 1) {
+    const mask = new Mask(decodedData.width, decodedData.height, {
+      data: decodedData.data as Uint8Array,
+    });
+    return mask.convertColor('GREY');
+  } else {
+    let colorModel: ImageColorModel;
+    switch (decodedData.channels) {
+      case 1:
+        colorModel = 'GREY';
+        break;
+      case 3:
+        colorModel = 'RGB';
+        break;
+      default:
+        colorModel = 'RGBA';
+        break;
+    }
+    return new Image(decodedData.width, decodedData.height, {
+      colorModel,
+      data: decodedData.data as Uint8Array,
+    });
+  }
+}