cross-image 0.2.0 → 0.2.2

package/esm/src/image.js

@@ -1,14 +1,17 @@
 import { resizeBilinear, resizeNearest } from "./utils/resize.js";
-import { adjustBrightness, adjustContrast, adjustExposure, adjustSaturation, composite, crop, fillRect, grayscale, invert, } from "./utils/image_processing.js";
+import { adjustBrightness, adjustContrast, adjustExposure, adjustSaturation, boxBlur, composite, crop, fillRect, gaussianBlur, grayscale, invert, medianFilter, sepia, sharpen, } from "./utils/image_processing.js";
 import { PNGFormat } from "./formats/png.js";
+import { APNGFormat } from "./formats/apng.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 { ICOFormat } from "./formats/ico.js";
 import { DNGFormat } from "./formats/dng.js";
 import { PAMFormat } from "./formats/pam.js";
 import { PCXFormat } from "./formats/pcx.js";
+import { PPMFormat } from "./formats/ppm.js";
 import { ASCIIFormat } from "./formats/ascii.js";
 import { validateImageDimensions } from "./utils/security.js";
 /**
@@ -456,6 +459,61 @@ export class Image {
         this.imageData.data = grayscale(this.imageData.data);
         return this;
     }
+    /**
+     * Apply sepia tone effect to the image
+     * @returns This image instance for chaining
+     */
+    sepia() {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = sepia(this.imageData.data);
+        return this;
+    }
+    /**
+     * Apply box blur filter to the image
+     * @param radius Blur radius (default: 1)
+     * @returns This image instance for chaining
+     */
+    blur(radius = 1) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = boxBlur(this.imageData.data, this.imageData.width, this.imageData.height, radius);
+        return this;
+    }
+    /**
+     * Apply Gaussian blur filter to the image
+     * @param radius Blur radius (default: 1)
+     * @param sigma Optional standard deviation (if not provided, calculated from radius)
+     * @returns This image instance for chaining
+     */
+    gaussianBlur(radius = 1, sigma) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = gaussianBlur(this.imageData.data, this.imageData.width, this.imageData.height, radius, sigma);
+        return this;
+    }
+    /**
+     * Apply sharpen filter to the image
+     * @param amount Sharpening amount (0-1, default: 0.5)
+     * @returns This image instance for chaining
+     */
+    sharpen(amount = 0.5) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = sharpen(this.imageData.data, this.imageData.width, this.imageData.height, amount);
+        return this;
+    }
+    /**
+     * Apply median filter to reduce noise
+     * @param radius Filter radius (default: 1)
+     * @returns This image instance for chaining
+     */
+    medianFilter(radius = 1) {
+        if (!this.imageData)
+            throw new Error("No image loaded");
+        this.imageData.data = medianFilter(this.imageData.data, this.imageData.width, this.imageData.height, radius);
+        return this;
+    }
     /**
      * Fill a rectangular region with a color
      * @param x Starting X position
@@ -551,14 +609,17 @@ Object.defineProperty(Image, "formats", {
     writable: true,
     value: [
         new PNGFormat(),
+        new APNGFormat(),
         new JPEGFormat(),
         new WebPFormat(),
         new GIFFormat(),
         new TIFFFormat(),
         new BMPFormat(),
+        new ICOFormat(),
         new DNGFormat(),
         new PAMFormat(),
         new PCXFormat(),
+        new PPMFormat(),
         new ASCIIFormat(),
     ]
 });

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

@@ -0,0 +1,30 @@
+/**
+ * Shared byte-level read/write utilities for image formats
+ * These functions handle reading and writing multi-byte integers
+ * in little-endian byte order, commonly used in BMP, ICO, GIF, and other formats.
+ */
+/**
+ * Read a 16-bit unsigned integer in little-endian format
+ */
+export declare function readUint16LE(data: Uint8Array, offset: number): number;
+/**
+ * Read a 32-bit unsigned integer in little-endian format
+ */
+export declare function readUint32LE(data: Uint8Array, offset: number): number;
+/**
+ * Read a 32-bit signed integer in little-endian format
+ */
+export declare function readInt32LE(data: Uint8Array, offset: number): number;
+/**
+ * Write a 16-bit unsigned integer in little-endian format
+ */
+export declare function writeUint16LE(data: Uint8Array, offset: number, value: number): void;
+/**
+ * Write a 32-bit unsigned integer in little-endian format
+ */
+export declare function writeUint32LE(data: Uint8Array, offset: number, value: number): void;
+/**
+ * Write a 32-bit signed integer in little-endian format
+ */
+export declare function writeInt32LE(data: Uint8Array, offset: number, value: number): void;
+//# sourceMappingURL=byte_utils.d.ts.map

package/esm/src/utils/byte_utils.js

@@ -0,0 +1,50 @@
+/**
+ * Shared byte-level read/write utilities for image formats
+ * These functions handle reading and writing multi-byte integers
+ * in little-endian byte order, commonly used in BMP, ICO, GIF, and other formats.
+ */
+// Constants for signed/unsigned integer conversion
+const INT32_MAX = 0x7fffffff;
+const UINT32_RANGE = 0x100000000;
+/**
+ * Read a 16-bit unsigned integer in little-endian format
+ */
+export function readUint16LE(data, offset) {
+    return data[offset] | (data[offset + 1] << 8);
+}
+/**
+ * Read a 32-bit unsigned integer in little-endian format
+ */
+export function readUint32LE(data, offset) {
+    return data[offset] | (data[offset + 1] << 8) |
+        (data[offset + 2] << 16) | (data[offset + 3] << 24);
+}
+/**
+ * Read a 32-bit signed integer in little-endian format
+ */
+export function readInt32LE(data, offset) {
+    const value = readUint32LE(data, offset);
+    return value > INT32_MAX ? value - UINT32_RANGE : value;
+}
+/**
+ * Write a 16-bit unsigned integer in little-endian format
+ */
+export function writeUint16LE(data, offset, value) {
+    data[offset] = value & 0xff;
+    data[offset + 1] = (value >>> 8) & 0xff;
+}
+/**
+ * Write a 32-bit unsigned integer in little-endian format
+ */
+export function writeUint32LE(data, offset, value) {
+    data[offset] = value & 0xff;
+    data[offset + 1] = (value >>> 8) & 0xff;
+    data[offset + 2] = (value >>> 16) & 0xff;
+    data[offset + 3] = (value >>> 24) & 0xff;
+}
+/**
+ * Write a 32-bit signed integer in little-endian format
+ */
+export function writeInt32LE(data, offset, value) {
+    writeUint32LE(data, offset, value < 0 ? value + UINT32_RANGE : value);
+}

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

@@ -5,8 +5,9 @@
 export declare class GIFEncoder {
     private width;
     private height;
-    private data;
-    constructor(width: number, height: number, data: Uint8Array);
+    private frames;
+    constructor(width: number, height: number, data?: Uint8Array);
+    addFrame(data: Uint8Array, delay?: number): void;
     private writeBytes;
     private writeUint16LE;
     private writeString;

package/esm/src/utils/gif_encoder.js

@@ -17,15 +17,20 @@ export class GIFEncoder {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "data", {
+        Object.defineProperty(this, "frames", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: []
         });
         this.width = width;
         this.height = height;
-        this.data = data;
+        if (data) {
+            this.addFrame(data);
+        }
+    }
+    addFrame(data, delay = 0) {
+        this.frames.push({ data, delay });
     }
     writeBytes(output, bytes) {
         output.push(...bytes);
@@ -54,7 +59,7 @@ export class GIFEncoder {
     /**
      * Quantize RGBA image to 256 colors using median cut algorithm
      */
-    quantize() {
+    quantize(data) {
         // Simple quantization: collect unique colors and build palette
         const colorMap = new Map();
         const colors = [];
@@ -65,10 +70,10 @@ export class GIFEncoder {
         const rgStep = 255 / RG_LEVELS; // Step size for R/G quantization
         const bStep = 255 / B_LEVELS; // Step size for B quantization
         // Collect unique colors
-        for (let i = 0; i < this.data.length; i += 4) {
-            const r = this.data[i];
-            const g = this.data[i + 1];
-            const b = this.data[i + 2];
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
             const key = `${r},${g},${b}`;
             if (!colorMap.has(key) && colors.length < 256) {
                 colorMap.set(key, colors.length);
@@ -83,12 +88,12 @@ export class GIFEncoder {
             colorMap.clear();
             colors.length = 0;
             useColorReduction = true;
-            for (let i = 0; i < this.data.length; i += 4) {
+            for (let i = 0; i < data.length; i += 4) {
                 // Reduce color depth: 3 bits for R/G channels, 2 bits for B channel
                 // This gives us 8 bits total = 256 possible colors
-                const r = this.quantizeChannel(this.data[i], RG_LEVELS, rgStep);
-                const g = this.quantizeChannel(this.data[i + 1], RG_LEVELS, rgStep);
-                const b = this.quantizeChannel(this.data[i + 2], B_LEVELS, bStep);
+                const r = this.quantizeChannel(data[i], RG_LEVELS, rgStep);
+                const g = this.quantizeChannel(data[i + 1], RG_LEVELS, rgStep);
+                const b = this.quantizeChannel(data[i + 2], B_LEVELS, bStep);
                 const key = `${r},${g},${b}`;
                 if (!colorMap.has(key)) {
                     if (colors.length < 256) {
@@ -112,10 +117,10 @@ export class GIFEncoder {
         }
         // Create indexed data
         const indexed = new Uint8Array(this.width * this.height);
-        for (let i = 0, j = 0; i < this.data.length; i += 4, j++) {
-            let r = this.data[i];
-            let g = this.data[i + 1];
-            let b = this.data[i + 2];
+        for (let i = 0, j = 0; i < data.length; i += 4, j++) {
+            let r = data[i];
+            let g = data[i + 1];
+            let b = data[i + 2];
             // Apply color reduction if it was used for building the palette
             if (useColorReduction) {
                 r = this.quantizeChannel(r, RG_LEVELS, rgStep);
@@ -161,10 +166,14 @@ export class GIFEncoder {
         return Math.max(2, bits);
     }
     encode() {
+        if (this.frames.length === 0) {
+            throw new Error("No frames to encode");
+        }
         const output = [];
-        // Quantize image
-        const { palette, indexed } = this.quantize();
-        const paletteSize = palette.length / 3;
+        // Quantize first frame for Global Color Table
+        const firstFrame = this.frames[0];
+        const { palette: globalPalette, indexed: firstIndexed } = this.quantize(firstFrame.data);
+        const paletteSize = globalPalette.length / 3;
         const bitsPerColor = this.getBitsPerColor(paletteSize);
         // Header
         this.writeString(output, "GIF89a");
@@ -187,38 +196,96 @@ export class GIFEncoder {
         // So we need to write that many colors, padding if necessary
         const gctSize = 1 << bitsPerColor;
         const paddedPalette = new Uint8Array(gctSize * 3);
-        paddedPalette.set(palette);
+        paddedPalette.set(globalPalette);
         this.writeBytes(output, paddedPalette);
-        // Image Descriptor
-        output.push(0x2c); // Image Separator
-        // Image position and dimensions
-        this.writeUint16LE(output, 0); // Left
-        this.writeUint16LE(output, 0); // Top
-        this.writeUint16LE(output, this.width);
-        this.writeUint16LE(output, this.height);
-        // Packed field:
-        // - Local Color Table Flag (1 bit): 0
-        // - Interlace Flag (1 bit): 0
-        // - Sort Flag (1 bit): 0
-        // - Reserved (2 bits): 0
-        // - Size of Local Color Table (3 bits): 0
-        output.push(0);
-        // LZW Minimum Code Size
-        const minCodeSize = Math.max(2, bitsPerColor);
-        output.push(minCodeSize);
-        // Compress image data with LZW
-        const encoder = new LZWEncoder(minCodeSize);
-        const compressed = encoder.compress(indexed);
-        // Write compressed data in sub-blocks (max 255 bytes per block)
-        for (let i = 0; i < compressed.length; i += 255) {
-            const blockSize = Math.min(255, compressed.length - i);
-            output.push(blockSize);
-            for (let j = 0; j < blockSize; j++) {
-                output.push(compressed[i + j]);
+        // Netscape Application Extension (Looping)
+        if (this.frames.length > 1) {
+            output.push(0x21); // Extension Introducer
+            output.push(0xff); // Application Extension Label
+            output.push(11); // Block Size
+            this.writeString(output, "NETSCAPE2.0");
+            output.push(3); // Sub-block Size
+            output.push(1); // Loop Indicator (1 = loop)
+            this.writeUint16LE(output, 0); // Loop Count (0 = infinite)
+            output.push(0); // Block Terminator
+        }
+        // Encode frames
+        for (let i = 0; i < this.frames.length; i++) {
+            const frame = this.frames[i];
+            let indexed;
+            let useLocalPalette = false;
+            let localPalette = null;
+            let localBitsPerColor = bitsPerColor;
+            if (i === 0) {
+                indexed = firstIndexed;
+            }
+            else {
+                // Quantize subsequent frames
+                // For simplicity, we use a Local Color Table for each frame to ensure colors are correct
+                const result = this.quantize(frame.data);
+                indexed = result.indexed;
+                localPalette = result.palette;
+                useLocalPalette = true;
+                const localPaletteSize = localPalette.length / 3;
+                localBitsPerColor = this.getBitsPerColor(localPaletteSize);
             }
+            // Graphic Control Extension
+            output.push(0x21); // Extension Introducer
+            output.push(0xf9); // Graphic Control Label
+            output.push(4); // Byte Size
+            // Packed Field
+            // Reserved (3 bits)
+            // Disposal Method (3 bits): 2 (Restore to background) - usually safe for animation
+            // User Input Flag (1 bit): 0
+            // Transparent Color Flag (1 bit): 0
+            output.push(0x08); // Disposal method 2 (Restore to background)
+            // Delay Time (1/100ths of a second)
+            // Default to 10 (100ms) if not specified
+            const delay = frame.delay > 0 ? Math.round(frame.delay / 10) : 10;
+            this.writeUint16LE(output, delay);
+            // Transparent Color Index
+            output.push(0);
+            output.push(0); // Block Terminator
+            // Image Descriptor
+            output.push(0x2c); // Image Separator
+            this.writeUint16LE(output, 0); // Left
+            this.writeUint16LE(output, 0); // Top
+            this.writeUint16LE(output, this.width);
+            this.writeUint16LE(output, this.height);
+            // Packed Field
+            if (useLocalPalette && localPalette) {
+                // LCT Flag: 1
+                // Interlace: 0
+                // Sort: 0
+                // Reserved: 0
+                // Size of LCT: localBitsPerColor - 1
+                const lctPacked = 0x80 | (localBitsPerColor - 1);
+                output.push(lctPacked);
+                // Write Local Color Table
+                const lctSize = 1 << localBitsPerColor;
+                const paddedLct = new Uint8Array(lctSize * 3);
+                paddedLct.set(localPalette);
+                this.writeBytes(output, paddedLct);
+            }
+            else {
+                output.push(0); // No LCT
+            }
+            // LZW Minimum Code Size
+            const minCodeSize = Math.max(2, useLocalPalette ? localBitsPerColor : bitsPerColor);
+            output.push(minCodeSize);
+            // Compress image data with LZW
+            const encoder = new LZWEncoder(minCodeSize);
+            const compressed = encoder.compress(indexed);
+            // Write compressed data in sub-blocks (max 255 bytes per block)
+            for (let k = 0; k < compressed.length; k += 255) {
+                const blockSize = Math.min(255, compressed.length - k);
+                output.push(blockSize);
+                for (let j = 0; j < blockSize; j++) {
+                    output.push(compressed[k + j]);
+                }
+            }
+            output.push(0); // Block Terminator
         }
-        // Block Terminator
-        output.push(0);
         // Trailer
         output.push(0x3b);
         return new Uint8Array(output);

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

@@ -88,4 +88,47 @@ export declare function crop(data: Uint8Array, width: number, height: number, x:
     width: number;
     height: number;
 };
+/**
+ * Apply a box blur filter to an image
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param radius Blur radius (default: 1)
+ * @returns New image data with box blur applied
+ */
+export declare function boxBlur(data: Uint8Array, width: number, height: number, radius?: number): Uint8Array;
+/**
+ * Apply Gaussian blur to an image
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param radius Blur radius (default: 1)
+ * @param sigma Optional standard deviation (if not provided, calculated from radius)
+ * @returns New image data with Gaussian blur applied
+ */
+export declare function gaussianBlur(data: Uint8Array, width: number, height: number, radius?: number, sigma?: number): Uint8Array;
+/**
+ * Apply sharpen filter to an image
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param amount Sharpening amount (0-1, default: 0.5)
+ * @returns New image data with sharpening applied
+ */
+export declare function sharpen(data: Uint8Array, width: number, height: number, amount?: number): Uint8Array;
+/**
+ * Apply sepia tone effect to an image
+ * @param data Image data (RGBA)
+ * @returns New image data with sepia tone applied
+ */
+export declare function sepia(data: Uint8Array): Uint8Array;
+/**
+ * Apply median filter to reduce noise
+ * @param data Image data (RGBA)
+ * @param width Image width
+ * @param height Image height
+ * @param radius Filter radius (default: 1)
+ * @returns New image data with median filter applied
+ */
+export declare function medianFilter(data: Uint8Array, width: number, height: number, radius?: number): Uint8Array;
 //# sourceMappingURL=image_processing.d.ts.map