cross-image 0.1.4 → 0.2.0

package/esm/src/image.js

@@ -1,11 +1,14 @@
 import { resizeBilinear, resizeNearest } from "./utils/resize.js";
+import { adjustBrightness, adjustContrast, adjustExposure, adjustSaturation, composite, crop, fillRect, grayscale, invert, } from "./utils/image_processing.js";
 import { PNGFormat } from "./formats/png.js";
 import { JPEGFormat } from "./formats/jpeg.js";
 import { WebPFormat } from "./formats/webp.js";
 import { GIFFormat } from "./formats/gif.js";
 import { TIFFFormat } from "./formats/tiff.js";
 import { BMPFormat } from "./formats/bmp.js";
-import { RAWFormat } from "./formats/raw.js";
+import { DNGFormat } from "./formats/dng.js";
+import { PAMFormat } from "./formats/pam.js";
+import { PCXFormat } from "./formats/pcx.js";
 import { ASCIIFormat } from "./formats/ascii.js";
 import { validateImageDimensions } from "./utils/security.js";
 /**
@@ -151,12 +154,12 @@ export class Image {
         return Image.formats;
     }
     /**
-     * Read an image from bytes
+     * Decode an image from bytes
      * @param data Raw image data
      * @param format Optional format hint (e.g., "png", "jpeg", "webp")
      * @returns Image instance
      */
-    static async read(data, format) {
+    static async decode(data, format) {
         const image = new Image();
         // Try specified format first
         if (format) {
@@ -176,12 +179,22 @@ export class Image {
         throw new Error("Unsupported or unrecognized image format");
     }
     /**
-     * Read all frames from a multi-frame image (GIF animation, multi-page TIFF)
+     * Read an image from bytes
+     * @deprecated Use `decode()` instead. This method will be removed in a future version.
+     * @param data Raw image data
+     * @param format Optional format hint (e.g., "png", "jpeg", "webp")
+     * @returns Image instance
+     */
+    static read(data, format) {
+        return Image.decode(data, format);
+    }
+    /**
+     * Decode all frames from a multi-frame image (GIF animation, multi-page TIFF)
      * @param data Raw image data
      * @param format Optional format hint (e.g., "gif", "tiff")
      * @returns MultiFrameImageData with all frames
      */
-    static async readFrames(data, format) {
+    static async decodeFrames(data, format) {
         // Try specified format first
         if (format) {
             const handler = Image.formats.find((f) => f.name === format);
@@ -198,13 +211,23 @@ export class Image {
         throw new Error("Unsupported or unrecognized multi-frame image format");
     }
     /**
-     * Save multi-frame image data to bytes in the specified format
+     * Read all frames from a multi-frame image (GIF animation, multi-page TIFF)
+     * @deprecated Use `decodeFrames()` instead. This method will be removed in a future version.
+     * @param data Raw image data
+     * @param format Optional format hint (e.g., "gif", "tiff")
+     * @returns MultiFrameImageData with all frames
+     */
+    static readFrames(data, format) {
+        return Image.decodeFrames(data, format);
+    }
+    /**
+     * Encode multi-frame image data to bytes in the specified format
      * @param format Format name (e.g., "gif", "tiff")
-     * @param imageData Multi-frame image data to save
+     * @param imageData Multi-frame image data to encode
      * @param options Optional format-specific encoding options
      * @returns Encoded image bytes
      */
-    static async saveFrames(format, imageData, options) {
+    static async encodeFrames(format, imageData, options) {
         const handler = Image.formats.find((f) => f.name === format);
         if (!handler) {
             throw new Error(`Unsupported format: ${format}`);
@@ -214,6 +237,17 @@ export class Image {
         }
         return await handler.encodeFrames(imageData, options);
     }
+    /**
+     * Save multi-frame image data to bytes in the specified format
+     * @deprecated Use `encodeFrames()` instead. This method will be removed in a future version.
+     * @param format Format name (e.g., "gif", "tiff")
+     * @param imageData Multi-frame image data to encode
+     * @param options Optional format-specific encoding options
+     * @returns Encoded image bytes
+     */
+    static saveFrames(format, imageData, options) {
+        return Image.encodeFrames(format, imageData, options);
+    }
     /**
      * Create an image from raw RGBA data
      * @param width Image width
@@ -231,6 +265,31 @@ export class Image {
         image.imageData = { width, height, data: new Uint8Array(data) };
         return image;
     }
+    /**
+     * Create a blank image with the specified dimensions and color
+     * @param width Image width
+     * @param height Image height
+     * @param r Red component (0-255, default: 0)
+     * @param g Green component (0-255, default: 0)
+     * @param b Blue component (0-255, default: 0)
+     * @param a Alpha component (0-255, default: 255)
+     * @returns Image instance
+     */
+    static create(width, height, r = 0, g = 0, b = 0, a = 255) {
+        // Validate dimensions for security (prevent integer overflow and heap exhaustion)
+        validateImageDimensions(width, height);
+        const data = new Uint8Array(width * height * 4);
+        // Fill with the specified color
+        for (let i = 0; i < data.length; i += 4) {
+            data[i] = r;
+            data[i + 1] = g;
+            data[i + 2] = b;
+            data[i + 3] = a;
+        }
+        const image = new Image();
+        image.imageData = { width, height, data };
+        return image;
+    }
     /**
      * Resize the image
      * @param options Resize options
@@ -270,12 +329,12 @@ export class Image {
         return this;
     }
     /**
-     * Save the image to bytes in the specified format
+     * Encode the image to bytes in the specified format
      * @param format Format name (e.g., "png", "jpeg", "webp", "ascii")
      * @param options Optional format-specific encoding options
      * @returns Encoded image bytes
      */
-    async save(format, options) {
+    async encode(format, options) {
         if (!this.imageData)
             throw new Error("No image loaded");
         const handler = Image.formats.find((f) => f.name === format);
@@ -284,6 +343,16 @@ export class Image {
         }
         return await handler.encode(this.imageData, options);
     }
+    /**
+     * Save the image to bytes in the specified format
+     * @deprecated Use `encode()` instead. This method will be removed in a future version.
+     * @param format Format name (e.g., "png", "jpeg", "webp", "ascii")
+     * @param options Optional format-specific encoding options
+     * @returns Encoded image bytes
+     */
+    save(format, options) {
+        return this.encode(format, options);
+    }
     /**
      * Clone this image
      * @returns New image instance with copied data and metadata
@@ -307,6 +376,174 @@ export class Image {
         };
         return image;
     }
+    /**
+     * Composite another image on top of this image at the specified position
+     * @param overlay Image to place on top
+     * @param x X position (can be negative)
+     * @param y Y position (can be negative)
+     * @param opacity Opacity of overlay (0-1, default: 1)
+     * @returns This image instance for chaining
+     */
+    composite(overlay, x, y, opacity = 1) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        if (!overlay.imageData)
+            throw new Error("Overlay has no image loaded");
+        this.imageData.data = composite(this.imageData.data, this.imageData.width, this.imageData.height, overlay.imageData.data, overlay.imageData.width, overlay.imageData.height, x, y, opacity);
+        return this;
+    }
+    /**
+     * Adjust brightness of the image
+     * @param amount Brightness adjustment (-1 to 1, where 0 is no change)
+     * @returns This image instance for chaining
+     */
+    brightness(amount) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = adjustBrightness(this.imageData.data, amount);
+        return this;
+    }
+    /**
+     * Adjust contrast of the image
+     * @param amount Contrast adjustment (-1 to 1, where 0 is no change)
+     * @returns This image instance for chaining
+     */
+    contrast(amount) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = adjustContrast(this.imageData.data, amount);
+        return this;
+    }
+    /**
+     * Adjust exposure of the image
+     * @param amount Exposure adjustment in stops (-3 to 3, where 0 is no change)
+     * @returns This image instance for chaining
+     */
+    exposure(amount) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = adjustExposure(this.imageData.data, amount);
+        return this;
+    }
+    /**
+     * Adjust saturation of the image
+     * @param amount Saturation adjustment (-1 to 1, where 0 is no change)
+     * @returns This image instance for chaining
+     */
+    saturation(amount) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = adjustSaturation(this.imageData.data, amount);
+        return this;
+    }
+    /**
+     * Invert colors of the image
+     * @returns This image instance for chaining
+     */
+    invert() {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = invert(this.imageData.data);
+        return this;
+    }
+    /**
+     * Convert the image to grayscale
+     * @returns This image instance for chaining
+     */
+    grayscale() {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = grayscale(this.imageData.data);
+        return this;
+    }
+    /**
+     * Fill a rectangular region with a color
+     * @param x Starting X position
+     * @param y Starting Y position
+     * @param width Width of the fill region
+     * @param height Height of the fill region
+     * @param r Red component (0-255)
+     * @param g Green component (0-255)
+     * @param b Blue component (0-255)
+     * @param a Alpha component (0-255, default: 255)
+     * @returns This image instance for chaining
+     */
+    fillRect(x, y, width, height, r, g, b, a = 255) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = fillRect(this.imageData.data, this.imageData.width, this.imageData.height, x, y, width, height, r, g, b, a);
+        return this;
+    }
+    /**
+     * Crop the image to a rectangular region
+     * @param x Starting X position
+     * @param y Starting Y position
+     * @param width Width of the crop region
+     * @param height Height of the crop region
+     * @returns This image instance for chaining
+     */
+    crop(x, y, width, height) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        const result = crop(this.imageData.data, this.imageData.width, this.imageData.height, x, y, width, height);
+        this.imageData.width = result.width;
+        this.imageData.height = result.height;
+        this.imageData.data = result.data;
+        // Update physical dimensions if DPI is set
+        if (this.imageData.metadata) {
+            const metadata = this.imageData.metadata;
+            if (metadata.dpiX) {
+                this.imageData.metadata.physicalWidth = result.width / metadata.dpiX;
+            }
+            if (metadata.dpiY) {
+                this.imageData.metadata.physicalHeight = result.height / metadata.dpiY;
+            }
+        }
+        return this;
+    }
+    /**
+     * Get the pixel color at the specified position
+     * @param x X position
+     * @param y Y position
+     * @returns Object with r, g, b, a components (0-255) or undefined if out of bounds
+     */
+    getPixel(x, y) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        if (x < 0 || x >= this.imageData.width || y < 0 || y >= this.imageData.height) {
+            return undefined;
+        }
+        const idx = (y * this.imageData.width + x) * 4;
+        return {
+            r: this.imageData.data[idx],
+            g: this.imageData.data[idx + 1],
+            b: this.imageData.data[idx + 2],
+            a: this.imageData.data[idx + 3],
+        };
+    }
+    /**
+     * Set the pixel color at the specified position
+     * @param x X position
+     * @param y Y position
+     * @param r Red component (0-255)
+     * @param g Green component (0-255)
+     * @param b Blue component (0-255)
+     * @param a Alpha component (0-255, default: 255)
+     * @returns This image instance for chaining
+     */
+    setPixel(x, y, r, g, b, a = 255) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        if (x < 0 || x >= this.imageData.width || y < 0 || y >= this.imageData.height) {
+            return this;
+        }
+        const idx = (y * this.imageData.width + x) * 4;
+        this.imageData.data[idx] = r;
+        this.imageData.data[idx + 1] = g;
+        this.imageData.data[idx + 2] = b;
+        this.imageData.data[idx + 3] = a;
+        return this;
+    }
 }
 Object.defineProperty(Image, "formats", {
     enumerable: true,
@@ -319,7 +556,9 @@ Object.defineProperty(Image, "formats", {
         new GIFFormat(),
         new TIFFFormat(),
         new BMPFormat(),
-        new RAWFormat(),
+        new DNGFormat(),
+        new PAMFormat(),
+        new PCXFormat(),
         new ASCIIFormat(),
     ]
 });

package/esm/src/utils/image_processing.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Image processing utilities for common operations like compositing,
+ * level adjustments, and color manipulations.
+ */
+/**
+ * Composite one image on top of another at a specified position
+ * @param base Base image data (RGBA)
+ * @param baseWidth Base image width
+ * @param baseHeight Base image height
+ * @param overlay Overlay image data (RGBA)
+ * @param overlayWidth Overlay image width
+ * @param overlayHeight Overlay image height
+ * @param x X position to place overlay (can be negative)
+ * @param y Y position to place overlay (can be negative)
+ * @param opacity Opacity of overlay (0-1, default: 1)
+ * @returns New image data with overlay composited on base
+ */
+export declare function composite(base: Uint8Array, baseWidth: number, baseHeight: number, overlay: Uint8Array, overlayWidth: number, overlayHeight: number, x: number, y: number, opacity?: number): Uint8Array;
+/**
+ * Adjust brightness of an image
+ * @param data Image data (RGBA)
+ * @param amount Brightness adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted brightness
+ */
+export declare function adjustBrightness(data: Uint8Array, amount: number): Uint8Array;
+/**
+ * Adjust contrast of an image
+ * @param data Image data (RGBA)
+ * @param amount Contrast adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted contrast
+ */
+export declare function adjustContrast(data: Uint8Array, amount: number): Uint8Array;
+/**
+ * Adjust exposure of an image
+ * @param data Image data (RGBA)
+ * @param amount Exposure adjustment in stops (-3 to 3, where 0 is no change)
+ * @returns New image data with adjusted exposure
+ */
+export declare function adjustExposure(data: Uint8Array, amount: number): Uint8Array;
+/**
+ * Adjust saturation of an image
+ * @param data Image data (RGBA)
+ * @param amount Saturation adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted saturation
+ */
+export declare function adjustSaturation(data: Uint8Array, amount: number): Uint8Array;
+/**
+ * Invert colors of an image
+ * @param data Image data (RGBA)
+ * @returns New image data with inverted colors
+ */
+export declare function invert(data: Uint8Array): Uint8Array;
+/**
+ * Convert image to grayscale
+ * @param data Image data (RGBA)
+ * @returns New image data in grayscale
+ */
+export declare function grayscale(data: Uint8Array): Uint8Array;
+/**
+ * Fill a rectangular region with a color
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param x Starting X position
+ * @param y Starting Y position
+ * @param fillWidth Width of the fill region
+ * @param fillHeight Height of the fill region
+ * @param r Red component (0-255)
+ * @param g Green component (0-255)
+ * @param b Blue component (0-255)
+ * @param a Alpha component (0-255)
+ * @returns Modified image data
+ */
+export declare function fillRect(data: Uint8Array, width: number, height: number, x: number, y: number, fillWidth: number, fillHeight: number, r: number, g: number, b: number, a: number): Uint8Array;
+/**
+ * Crop an image to a rectangular region
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param x Starting X position
+ * @param y Starting Y position
+ * @param cropWidth Width of the crop region
+ * @param cropHeight Height of the crop region
+ * @returns Cropped image data and dimensions
+ */
+export declare function crop(data: Uint8Array, width: number, height: number, x: number, y: number, cropWidth: number, cropHeight: number): {
+    data: Uint8Array;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=image_processing.d.ts.map

package/esm/src/utils/image_processing.js

@@ -0,0 +1,231 @@
+/**
+ * Image processing utilities for common operations like compositing,
+ * level adjustments, and color manipulations.
+ */
+/**
+ * Composite one image on top of another at a specified position
+ * @param base Base image data (RGBA)
+ * @param baseWidth Base image width
+ * @param baseHeight Base image height
+ * @param overlay Overlay image data (RGBA)
+ * @param overlayWidth Overlay image width
+ * @param overlayHeight Overlay image height
+ * @param x X position to place overlay (can be negative)
+ * @param y Y position to place overlay (can be negative)
+ * @param opacity Opacity of overlay (0-1, default: 1)
+ * @returns New image data with overlay composited on base
+ */
+export function composite(base, baseWidth, baseHeight, overlay, overlayWidth, overlayHeight, x, y, opacity = 1) {
+    const result = new Uint8Array(base);
+    // Clamp opacity to valid range
+    const finalOpacity = Math.max(0, Math.min(1, opacity));
+    // Calculate the region to composite
+    const startX = Math.max(0, x);
+    const startY = Math.max(0, y);
+    const endX = Math.min(baseWidth, x + overlayWidth);
+    const endY = Math.min(baseHeight, y + overlayHeight);
+    // Iterate over the overlapping region
+    for (let py = startY; py < endY; py++) {
+        for (let px = startX; px < endX; px++) {
+            // Calculate indices
+            const baseIdx = (py * baseWidth + px) * 4;
+            const overlayX = px - x;
+            const overlayY = py - y;
+            const overlayIdx = (overlayY * overlayWidth + overlayX) * 4;
+            // Get overlay pixel with opacity
+            const overlayR = overlay[overlayIdx];
+            const overlayG = overlay[overlayIdx + 1];
+            const overlayB = overlay[overlayIdx + 2];
+            const overlayA = (overlay[overlayIdx + 3] / 255) * finalOpacity;
+            // Get base pixel
+            const baseR = result[baseIdx];
+            const baseG = result[baseIdx + 1];
+            const baseB = result[baseIdx + 2];
+            const baseA = result[baseIdx + 3] / 255;
+            // Alpha compositing using "over" operation
+            const outA = overlayA + baseA * (1 - overlayA);
+            if (outA > 0) {
+                result[baseIdx] = Math.round((overlayR * overlayA + baseR * baseA * (1 - overlayA)) / outA);
+                result[baseIdx + 1] = Math.round((overlayG * overlayA + baseG * baseA * (1 - overlayA)) / outA);
+                result[baseIdx + 2] = Math.round((overlayB * overlayA + baseB * baseA * (1 - overlayA)) / outA);
+                result[baseIdx + 3] = Math.round(outA * 255);
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Adjust brightness of an image
+ * @param data Image data (RGBA)
+ * @param amount Brightness adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted brightness
+ */
+export function adjustBrightness(data, amount) {
+    const result = new Uint8Array(data.length);
+    const adjust = Math.max(-1, Math.min(1, amount)) * 255;
+    for (let i = 0; i < data.length; i += 4) {
+        result[i] = Math.max(0, Math.min(255, data[i] + adjust)); // R
+        result[i + 1] = Math.max(0, Math.min(255, data[i + 1] + adjust)); // G
+        result[i + 2] = Math.max(0, Math.min(255, data[i + 2] + adjust)); // B
+        result[i + 3] = data[i + 3]; // A
+    }
+    return result;
+}
+/**
+ * Adjust contrast of an image
+ * @param data Image data (RGBA)
+ * @param amount Contrast adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted contrast
+ */
+export function adjustContrast(data, amount) {
+    const result = new Uint8Array(data.length);
+    const contrast = Math.max(-1, Math.min(1, amount));
+    const factor = (259 * (contrast * 255 + 255)) /
+        (255 * (259 - contrast * 255));
+    for (let i = 0; i < data.length; i += 4) {
+        result[i] = Math.max(0, Math.min(255, factor * (data[i] - 128) + 128)); // R
+        result[i + 1] = Math.max(0, Math.min(255, factor * (data[i + 1] - 128) + 128)); // G
+        result[i + 2] = Math.max(0, Math.min(255, factor * (data[i + 2] - 128) + 128)); // B
+        result[i + 3] = data[i + 3]; // A
+    }
+    return result;
+}
+/**
+ * Adjust exposure of an image
+ * @param data Image data (RGBA)
+ * @param amount Exposure adjustment in stops (-3 to 3, where 0 is no change)
+ * @returns New image data with adjusted exposure
+ */
+export function adjustExposure(data, amount) {
+    const result = new Uint8Array(data.length);
+    const stops = Math.max(-3, Math.min(3, amount));
+    const multiplier = Math.pow(2, stops);
+    for (let i = 0; i < data.length; i += 4) {
+        result[i] = Math.max(0, Math.min(255, data[i] * multiplier)); // R
+        result[i + 1] = Math.max(0, Math.min(255, data[i + 1] * multiplier)); // G
+        result[i + 2] = Math.max(0, Math.min(255, data[i + 2] * multiplier)); // B
+        result[i + 3] = data[i + 3]; // A
+    }
+    return result;
+}
+/**
+ * Adjust saturation of an image
+ * @param data Image data (RGBA)
+ * @param amount Saturation adjustment (-1 to 1, where 0 is no change)
+ * @returns New image data with adjusted saturation
+ */
+export function adjustSaturation(data, amount) {
+    const result = new Uint8Array(data.length);
+    const sat = Math.max(-1, Math.min(1, amount)) + 1; // Convert to 0-2 range
+    for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        // Calculate grayscale value using luminosity method
+        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+        // Interpolate between gray and original color based on saturation
+        result[i] = Math.max(0, Math.min(255, gray + (r - gray) * sat));
+        result[i + 1] = Math.max(0, Math.min(255, gray + (g - gray) * sat));
+        result[i + 2] = Math.max(0, Math.min(255, gray + (b - gray) * sat));
+        result[i + 3] = data[i + 3];
+    }
+    return result;
+}
+/**
+ * Invert colors of an image
+ * @param data Image data (RGBA)
+ * @returns New image data with inverted colors
+ */
+export function invert(data) {
+    const result = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+        result[i] = 255 - data[i]; // R
+        result[i + 1] = 255 - data[i + 1]; // G
+        result[i + 2] = 255 - data[i + 2]; // B
+        result[i + 3] = data[i + 3]; // A
+    }
+    return result;
+}
+/**
+ * Convert image to grayscale
+ * @param data Image data (RGBA)
+ * @returns New image data in grayscale
+ */
+export function grayscale(data) {
+    const result = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+        // Using luminosity method for grayscale conversion
+        const gray = Math.round(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
+        result[i] = gray; // R
+        result[i + 1] = gray; // G
+        result[i + 2] = gray; // B
+        result[i + 3] = data[i + 3]; // A
+    }
+    return result;
+}
+/**
+ * Fill a rectangular region with a color
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param x Starting X position
+ * @param y Starting Y position
+ * @param fillWidth Width of the fill region
+ * @param fillHeight Height of the fill region
+ * @param r Red component (0-255)
+ * @param g Green component (0-255)
+ * @param b Blue component (0-255)
+ * @param a Alpha component (0-255)
+ * @returns Modified image data
+ */
+export function fillRect(data, width, height, x, y, fillWidth, fillHeight, r, g, b, a) {
+    const result = new Uint8Array(data);
+    // Calculate bounds
+    const startX = Math.max(0, x);
+    const startY = Math.max(0, y);
+    const endX = Math.min(width, x + fillWidth);
+    const endY = Math.min(height, y + fillHeight);
+    // Fill the region
+    for (let py = startY; py < endY; py++) {
+        for (let px = startX; px < endX; px++) {
+            const idx = (py * width + px) * 4;
+            result[idx] = r;
+            result[idx + 1] = g;
+            result[idx + 2] = b;
+            result[idx + 3] = a;
+        }
+    }
+    return result;
+}
+/**
+ * Crop an image to a rectangular region
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param x Starting X position
+ * @param y Starting Y position
+ * @param cropWidth Width of the crop region
+ * @param cropHeight Height of the crop region
+ * @returns Cropped image data and dimensions
+ */
+export function crop(data, width, height, x, y, cropWidth, cropHeight) {
+    // Clamp crop region to image bounds
+    const startX = Math.max(0, x);
+    const startY = Math.max(0, y);
+    const endX = Math.min(width, x + cropWidth);
+    const endY = Math.min(height, y + cropHeight);
+    const actualWidth = endX - startX;
+    const actualHeight = endY - startY;
+    const result = new Uint8Array(actualWidth * actualHeight * 4);
+    for (let py = 0; py < actualHeight; py++) {
+        for (let px = 0; px < actualWidth; px++) {
+            const srcIdx = ((startY + py) * width + (startX + px)) * 4;
+            const dstIdx = (py * actualWidth + px) * 4;
+            result[dstIdx] = data[srcIdx];
+            result[dstIdx + 1] = data[srcIdx + 1];
+            result[dstIdx + 2] = data[srcIdx + 2];
+            result[dstIdx + 3] = data[srcIdx + 3];
+        }
+    }
+    return { data: result, width: actualWidth, height: actualHeight };
+}