pixel-data-js 0.5.2 → 0.8.0

package/src/IndexedImage/IndexedImage.ts

@@ -5,79 +5,62 @@
  */
 export type IndexedImage = {
   /** The width of the image in pixels. */
-  width: number,
+  width: number;
   /** The height of the image in pixels. */
-  height: number,
+  height: number;
   /**
-   *  A flat array of indices where each value points to a color in the palette.
+   * A flat array of indices where each value points to a color in the palette.
    * Accessible via the formula: `index = x + (y * width)`.
    */
-  data: Int32Array,
+  data: Int32Array;
   /**
-   * A flattened Uint8Array of RGBA values.
-   * Every 4 bytes represent one color: `[r, g, b, a]`.
+   * A palette of packed 32-bit colors (ABGR).
    */
-  palette: Uint8Array,
+  palette: Int32Array;
   /**
    * The specific index in the palette that represents a fully transparent pixel.
-   * All pixels with an alpha value of 0 are normalized to this index.
    */
-  transparentPalletIndex: number,
-}
+  transparentPalletIndex: number;
+};
 
 /**
  * Converts standard ImageData into an IndexedImage format.
- * This process normalizes all transparent pixels into a single palette entry
- * and maps all unique RGBA colors to sequential integer IDs.
- * @param imageData - The raw ImageData from a canvas or image source.
- * @returns An IndexedImage object containing the index grid and color palette.
  */
 export function makeIndexedImage(imageData: ImageData): IndexedImage {
-  const width = imageData.width
-  const height = imageData.height
-  const rawData = imageData.data
-  const indexedData = new Int32Array(rawData.length / 4)
-  const colorMap = new Map<string, number>()
-  const tempPalette: number[] = []
+  const width = imageData.width;
+  const height = imageData.height;
+  // Use a 32-bit view to read pixels as packed integers
+  const rawData = new Uint32Array(imageData.data.buffer);
+  const indexedData = new Int32Array(rawData.length);
+  const colorMap = new Map<number, number>();
+  const tempPalette: number[] = [];
 
-  const transparentKey = '0,0,0,0'
-  const transparentPalletIndex = 0
+  const transparentColor = 0; // 0x00000000
+  const transparentPalletIndex = 0;
 
-  // Initialize palette with normalized transparent color at index 0
-  colorMap.set(transparentKey, transparentPalletIndex)
-  tempPalette.push(0)
-  tempPalette.push(0)
-  tempPalette.push(0)
-  tempPalette.push(0)
+  // Initialize palette with normalized transparent color
+  colorMap.set(transparentColor, transparentPalletIndex);
+  tempPalette.push(transparentColor);
 
-  for (let i = 0; i < indexedData.length; i++) {
-    const r = rawData[i * 4]!
-    const g = rawData[i * 4 + 1]!
-    const b = rawData[i * 4 + 2]!
-    const a = rawData[i * 4 + 3]!
+  for (let i = 0; i < rawData.length; i++) {
+    const pixel = rawData[i]!;
 
-    let key: string
-    if (a === 0) {
-      key = transparentKey
-    } else {
-      key = `${r},${g},${b},${a}`
-    }
+    // Check if the pixel is fully transparent
+    const isTransparent = (pixel >>> 24) === 0;
+    const colorKey = isTransparent ? transparentColor : pixel;
 
-    let id = colorMap.get(key)
+    let id = colorMap.get(colorKey);
 
     if (id === undefined) {
-      id = colorMap.size
-      tempPalette.push(r)
-      tempPalette.push(g)
-      tempPalette.push(b)
-      tempPalette.push(a)
-      colorMap.set(key, id)
+      id = colorMap.size;
+      tempPalette.push(colorKey);
+      colorMap.set(colorKey, id);
     }
 
-    indexedData[i] = id
+    indexedData[i] = id;
   }
 
-  const palette = new Uint8Array(tempPalette)
+  const palette = new Int32Array(tempPalette);
 
   return {
     width,
@@ -85,5 +68,5 @@ export function makeIndexedImage(imageData: ImageData): IndexedImage {
     data: indexedData,
     transparentPalletIndex,
     palette,
-  }
+  };
 }

package/src/IndexedImage/indexedImageToAverageColor.ts

@@ -0,0 +1,65 @@
+import type { Color32 } from '../_types'
+import { packColor } from '../color'
+import type { IndexedImage } from './IndexedImage'
+
+/**
+ * Calculates the area-weighted average color of an IndexedImage.
+ * This accounts for how often each palette index appears in the pixel data.
+ * @param indexedImage - The IndexedImage containing pixel indices and the palette.
+ * @param includeTransparent - Whether to include the transparent pixels in the average.
+ * @returns The average RGBA color of the image.
+ */
+export function indexedImageToAverageColor(
+  indexedImage: IndexedImage,
+  includeTransparent: boolean = false,
+): Color32 {
+  const { data, palette, transparentPalletIndex } = indexedImage
+  const counts = new Uint32Array(palette.length / 4)
+
+  // Tally occurrences of each index
+  for (let i = 0; i < data.length; i++) {
+    const id = data[i]!
+    counts[id]!++
+  }
+
+  let rSum = 0
+  let gSum = 0
+  let bSum = 0
+  let aSum = 0
+  let totalWeight = 0
+
+  for (let id = 0; id < counts.length; id++) {
+    const weight = counts[id]!
+
+    if (weight === 0) {
+      continue
+    }
+
+    if (!includeTransparent && id === transparentPalletIndex) {
+      continue
+    }
+
+    const pIdx = id * 4
+    const r = palette[pIdx]!
+    const g = palette[pIdx + 1]!
+    const b = palette[pIdx + 2]!
+    const a = palette[pIdx + 3]!
+
+    rSum += r * weight
+    gSum += g * weight
+    bSum += b * weight
+    aSum += a * weight
+    totalWeight += weight
+  }
+
+  if (totalWeight === 0) {
+    return packColor(0, 0, 0, 0)
+  }
+
+  const r = (rSum / totalWeight) | 0
+  const g = (gSum / totalWeight) | 0
+  const b = (bSum / totalWeight) | 0
+  const a = (aSum / totalWeight) | 0
+
+  return packColor(r, g, b, a)
+}

package/src/PixelData/PixelData.ts

@@ -0,0 +1,31 @@
+import type { ImageDataLike } from '../_types'
+
+export class PixelData {
+  public data32: Uint32Array
+  public width: number
+  public height: number
+
+  constructor(public readonly imageData: ImageDataLike) {
+    this.width = imageData.width
+    this.height = imageData.height
+
+    // Create the view once.
+    this.data32 = new Uint32Array(
+      imageData.data.buffer,
+      imageData.data.byteOffset,
+      // Shift right by 2 is a fast bitwise division by 4.
+      imageData.data.byteLength >> 2,
+    )
+  }
+
+  copy(): PixelData {
+    const buffer = new Uint8ClampedArray(this.data32.buffer.slice(0))
+    const imageData = {
+      data: buffer,
+      width: this.width,
+      height: this.height,
+    }
+
+    return new PixelData(imageData)
+  }
+}

package/src/PixelData/applyMaskToPixelData.ts

@@ -1,5 +1,5 @@
 import { type AnyMask, type ApplyMaskOptions, MaskType } from '../_types'
-import type { PixelData } from '../PixelData'
+import type { PixelData } from './PixelData'
 
 /**
  * Directly applies a mask to a region of PixelData,

package/src/PixelData/blendColorPixelData.ts

@@ -1,6 +1,7 @@
 import { type Color32, type ColorBlendOptions, MaskType } from '../_types'
-import { sourceOverColor32 } from '../blend-modes'
-import type { PixelData } from '../PixelData'
+import { BlendMode } from '../BlendModes/blend-modes'
+import { FAST_BLEND_MODES } from '../BlendModes/blend-modes-fast'
+import type { PixelData } from './PixelData'
 
 /**
  * Fills a rectangle in the destination PixelData with a single color,
@@ -17,7 +18,7 @@ export function blendColorPixelData(
     w: width = dst.width,
     h: height = dst.height,
     alpha: globalAlpha = 255,
-    blendFn = sourceOverColor32,
+    blendFn = FAST_BLEND_MODES[BlendMode.sourceOver],
     mask,
     maskType = MaskType.ALPHA,
     mw,

package/src/PixelData/blendPixelData.ts

@@ -1,6 +1,7 @@
 import { type Color32, MaskType, type PixelBlendOptions } from '../_types'
-import { sourceOverColor32 } from '../blend-modes'
-import type { PixelData } from '../PixelData'
+import { BlendMode } from '../BlendModes/blend-modes'
+import { FAST_BLEND_MODES } from '../BlendModes/blend-modes-fast'
+import type { PixelData } from './PixelData'
 
 /**
  * Blits source PixelData into a destination PixelData using 32-bit integer bitwise blending.
@@ -29,7 +30,7 @@ export function blendPixelData(
     w: width = src.width,
     h: height = src.height,
     alpha: globalAlpha = 255,
-    blendFn = sourceOverColor32,
+    blendFn = FAST_BLEND_MODES[BlendMode.sourceOver],
     mask,
     maskType = MaskType.ALPHA,
     mw,

package/src/PixelData/clearPixelData.ts

@@ -1,5 +1,5 @@
 import type { Color32, Rect } from '../_types'
-import type { PixelData } from '../PixelData'
+import type { PixelData } from './PixelData'
 import { fillPixelData } from './fillPixelData'
 
 /**

package/src/PixelData/fillPixelData.ts

@@ -1,5 +1,5 @@
 import type { Color32, Rect } from '../_types'
-import type { PixelData } from '../PixelData'
+import type { PixelData } from './PixelData'
 
 /**
  * Fills a region or the {@link PixelData} buffer with a solid color.

package/src/PixelData/invertPixelData.ts

@@ -1,4 +1,4 @@
-import type { PixelData } from '../PixelData'
+import type { PixelData } from './PixelData'
 
 export function invertPixelData(
   pixelData: PixelData,

package/src/PixelData/pixelDataToAlphaMask.ts

@@ -1,5 +1,5 @@
 import type { AlphaMask } from '../_types'
-import type { PixelData } from '../PixelData'
+import type { PixelData } from './PixelData'
 
 /**
  * Extracts the alpha channel from PixelData into a single-channel mask.

package/src/PixelData/reflectPixelData.ts

@@ -0,0 +1,42 @@
+import type { PixelData } from './PixelData'
+
+export function reflectPixelDataHorizontal(pixelData: PixelData): void {
+  const width = pixelData.width
+  const height = pixelData.height
+  const data = pixelData.data32
+  const halfWidth = Math.floor(width / 2)
+
+  for (let y = 0; y < height; y++) {
+    const rowOffset = y * width
+
+    for (let x = 0; x < halfWidth; x++) {
+      const leftIdx = rowOffset + x
+      const rightIdx = rowOffset + (width - 1 - x)
+      const temp = data[leftIdx]
+
+      data[leftIdx] = data[rightIdx]
+      data[rightIdx] = temp
+    }
+  }
+}
+
+export function reflectPixelDataVertical(pixelData: PixelData): void {
+  const width = pixelData.width
+  const height = pixelData.height
+  const data = pixelData.data32
+  const halfHeight = Math.floor(height / 2)
+
+  for (let y = 0; y < halfHeight; y++) {
+    const topRowOffset = y * width
+    const bottomRowOffset = (height - 1 - y) * width
+
+    for (let x = 0; x < width; x++) {
+      const topIdx = topRowOffset + x
+      const bottomIdx = bottomRowOffset + x
+      const temp = data[topIdx]
+
+      data[topIdx] = data[bottomIdx]
+      data[bottomIdx] = temp
+    }
+  }
+}

package/src/PixelData/rotatePixelData.ts

@@ -0,0 +1,56 @@
+import { PixelData } from './PixelData'
+
+/**
+ * Rotates pixel data 90 degrees clockwise.
+ * If the image is square, it performs the rotation in-place.
+ * If rectangular, it returns a new Uint32Array and updates dimensions.
+ */
+export function rotatePixelData(pixelData: PixelData): void {
+  const width = pixelData.width
+  const height = pixelData.height
+  const data = pixelData.data32
+
+  if (width === height) {
+    rotateSquareInPlace(pixelData)
+    return
+  }
+
+  const newWidth = height
+  const newHeight = width
+  const newData = new Uint32Array(data.length)
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const oldIdx = y * width + x
+      const newX = height - 1 - y
+      const newY = x
+      const newIdx = newY * newWidth + newX
+
+      newData[newIdx] = data[oldIdx]
+    }
+  }
+
+  pixelData.width = newWidth
+  pixelData.height = newHeight
+  pixelData.data32 = newData
+}
+
+function rotateSquareInPlace(pixelData: PixelData): void {
+  const n = pixelData.width
+  const data = pixelData.data32
+
+  for (let i = 0; i < n / 2; i++) {
+    for (let j = i; j < n - i - 1; j++) {
+      const temp = data[i * n + j]
+      const top = i * n + j
+      const right = j * n + (n - 1 - i)
+      const bottom = (n - 1 - i) * n + (n - 1 - j)
+      const left = (n - 1 - j) * n + i
+
+      data[top] = data[left]
+      data[left] = data[bottom]
+      data[bottom] = data[right]
+      data[right] = temp
+    }
+  }
+}

package/src/_types.ts

@@ -1,4 +1,4 @@
-import { sourceOverColor32 } from './blend-modes'
+import { sourceOverFast } from './BlendModes/blend-modes-fast'
 
 /** ALL values are 0-255 (including alpha which in CSS is 0-1) */
 export type RGBA = { r: number, g: number, b: number, a: number }
@@ -142,7 +142,7 @@ export interface PixelBlendOptions extends PixelOptions {
 
   /**
    * The blending algorithm to use for blending pixels.
-   * @default {@link sourceOverColor32}
+   * @default {@link sourceOverFast}
    */
   blendFn?: BlendColor32
 }
@@ -153,7 +153,7 @@ export interface PixelBlendOptions extends PixelOptions {
 export interface ColorBlendOptions extends PixelOptions {
   /**
    * The blending algorithm to use for blending pixels.
-   * @default {@link sourceOverColor32}
+   * @default {@link sourceOverFast}
    */
   blendFn?: BlendColor32
 }

package/src/index.ts

@@ -1,9 +1,12 @@
 export * from './_types'
-export * from './blend-modes'
 export * from './color'
 
 export * from './Algorithm/floodFillSelection'
 
+export * from './BlendModes/blend-modes'
+export * from './BlendModes/blend-modes-fast'
+export * from './BlendModes/blend-modes-perfect'
+
 export * from './Canvas/PixelCanvas'
 export * from './Canvas/ReusableCanvas'
 
@@ -23,6 +26,7 @@ export * from './ImageData/serialization'
 export * from './ImageData/writeImageDataPixels'
 
 export * from './IndexedImage/IndexedImage'
+export * from './IndexedImage/indexedImageToAverageColor'
 
 export * from './Input/fileInputChangeToImageData'
 export * from './Input/fileToImageData'
@@ -33,7 +37,7 @@ export * from './Mask/extractMask'
 export * from './Mask/invertMask'
 export * from './Mask/mergeMasks'
 
-export * from './PixelData'
+export * from './PixelData/PixelData'
 export * from './PixelData/applyMaskToPixelData'
 export * from './PixelData/blendColorPixelData'
 export * from './PixelData/blendPixelData'
@@ -43,3 +47,4 @@ export * from './PixelData/invertPixelData'
 export * from './PixelData/pixelDataToAlphaMask'
 
 export * from './Rect/trimRectBounds'
+export { BlendMode } from './BlendModes/blend-modes'

package/src/PixelData.ts

@@ -1,20 +0,0 @@
-import type { ImageDataLike } from './_types'
-
-export class PixelData {
-  public readonly data32: Uint32Array
-  public readonly width: number
-  public readonly height: number
-
-  constructor(public readonly imageData: ImageDataLike) {
-    this.width = imageData.width
-    this.height = imageData.height
-
-    // Create the view once.
-    // Shift right by 2 is a fast bitwise division by 4.
-    this.data32 = new Uint32Array(
-      imageData.data.buffer,
-      imageData.data.byteOffset,
-      imageData.data.byteLength >> 2,
-    )
-  }
-}