cross-image 0.2.0 → 0.2.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cross-image",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A pure JavaScript, dependency-free, cross-runtime image processing library for Deno, Node.js, and Bun.",
   "keywords": [
     "image",

package/script/mod.d.ts

@@ -2,7 +2,7 @@
  * @module @cross/image
  *
  * A pure JavaScript, dependency-free, cross-runtime image processing library.
- * Supports decoding, resizing, and encoding common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, DNG, PAM, PCX).
+ * Supports decoding, resizing, and encoding common image formats (PNG, APNG, JPEG, WebP, GIF, TIFF, BMP, ICO, DNG, PAM, PCX).
  * Includes image processing capabilities like compositing, level adjustments, and pixel manipulation.
  *
  * @example
@@ -45,11 +45,13 @@
 export { Image } from "./src/image.js";
 export type { ASCIIOptions, FrameMetadata, ImageData, ImageFormat, ImageFrame, ImageMetadata, MultiFrameImageData, ResizeOptions, WebPEncodeOptions, } from "./src/types.js";
 export { PNGFormat } from "./src/formats/png.js";
+export { APNGFormat } from "./src/formats/apng.js";
 export { JPEGFormat } from "./src/formats/jpeg.js";
 export { WebPFormat } from "./src/formats/webp.js";
 export { GIFFormat } from "./src/formats/gif.js";
 export { type TIFFEncodeOptions, TIFFFormat } from "./src/formats/tiff.js";
 export { BMPFormat } from "./src/formats/bmp.js";
+export { ICOFormat } from "./src/formats/ico.js";
 export { DNGFormat } from "./src/formats/dng.js";
 export { PAMFormat } from "./src/formats/pam.js";
 export { PCXFormat } from "./src/formats/pcx.js";

package/script/mod.js

@@ -3,7 +3,7 @@
  * @module @cross/image
  *
  * A pure JavaScript, dependency-free, cross-runtime image processing library.
- * Supports decoding, resizing, and encoding common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, DNG, PAM, PCX).
+ * Supports decoding, resizing, and encoding common image formats (PNG, APNG, JPEG, WebP, GIF, TIFF, BMP, ICO, DNG, PAM, PCX).
  * Includes image processing capabilities like compositing, level adjustments, and pixel manipulation.
  *
  * @example
@@ -44,11 +44,13 @@
  * ```
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASCIIFormat = exports.PCXFormat = exports.PAMFormat = exports.DNGFormat = exports.BMPFormat = exports.TIFFFormat = exports.GIFFormat = exports.WebPFormat = exports.JPEGFormat = exports.PNGFormat = exports.Image = void 0;
+exports.ASCIIFormat = exports.PCXFormat = exports.PAMFormat = exports.DNGFormat = exports.ICOFormat = exports.BMPFormat = exports.TIFFFormat = exports.GIFFormat = exports.WebPFormat = exports.JPEGFormat = exports.APNGFormat = exports.PNGFormat = exports.Image = void 0;
 var image_js_1 = require("./src/image.js");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return image_js_1.Image; } });
 var png_js_1 = require("./src/formats/png.js");
 Object.defineProperty(exports, "PNGFormat", { enumerable: true, get: function () { return png_js_1.PNGFormat; } });
+var apng_js_1 = require("./src/formats/apng.js");
+Object.defineProperty(exports, "APNGFormat", { enumerable: true, get: function () { return apng_js_1.APNGFormat; } });
 var jpeg_js_1 = require("./src/formats/jpeg.js");
 Object.defineProperty(exports, "JPEGFormat", { enumerable: true, get: function () { return jpeg_js_1.JPEGFormat; } });
 var webp_js_1 = require("./src/formats/webp.js");
@@ -59,6 +61,8 @@ var tiff_js_1 = require("./src/formats/tiff.js");
 Object.defineProperty(exports, "TIFFFormat", { enumerable: true, get: function () { return tiff_js_1.TIFFFormat; } });
 var bmp_js_1 = require("./src/formats/bmp.js");
 Object.defineProperty(exports, "BMPFormat", { enumerable: true, get: function () { return bmp_js_1.BMPFormat; } });
+var ico_js_1 = require("./src/formats/ico.js");
+Object.defineProperty(exports, "ICOFormat", { enumerable: true, get: function () { return ico_js_1.ICOFormat; } });
 var dng_js_1 = require("./src/formats/dng.js");
 Object.defineProperty(exports, "DNGFormat", { enumerable: true, get: function () { return dng_js_1.DNGFormat; } });
 var pam_js_1 = require("./src/formats/pam.js");

package/script/src/formats/apng.d.ts

@@ -0,0 +1,50 @@
+import type { ImageData, ImageFormat, MultiFrameImageData } from "../types.js";
+import { PNGBase } from "./png_base.js";
+/**
+ * APNG (Animated PNG) format handler
+ * Implements support for animated PNG images with multiple frames
+ * APNG extends PNG with animation control chunks (acTL, fcTL, fdAT)
+ */
+export declare class APNGFormat extends PNGBase implements ImageFormat {
+    /** Format name identifier */
+    readonly name = "apng";
+    /** MIME type for APNG images */
+    readonly mimeType = "image/apng";
+    /**
+     * Check if this format supports multiple frames (animations)
+     * @returns true for APNG format
+     */
+    supportsMultipleFrames(): boolean;
+    /**
+     * Check if the given data is an APNG image
+     * @param data Raw image data to check
+     * @returns true if data has PNG signature and contains acTL chunk
+     */
+    canDecode(data: Uint8Array): boolean;
+    /**
+     * Decode APNG image data to RGBA (first frame only)
+     * @param data Raw APNG image data
+     * @returns Decoded image data with RGBA pixels of first frame
+     */
+    decode(data: Uint8Array): Promise<ImageData>;
+    /**
+     * Decode all frames from APNG image
+     * @param data Raw APNG image data
+     * @returns Decoded multi-frame image data
+     */
+    decodeFrames(data: Uint8Array): Promise<MultiFrameImageData>;
+    /**
+     * Encode RGBA image data to APNG format (single frame)
+     * @param imageData Image data to encode
+     * @returns Encoded APNG image bytes
+     */
+    encode(imageData: ImageData): Promise<Uint8Array>;
+    /**
+     * Encode multi-frame image data to APNG format
+     * @param imageData Multi-frame image data to encode
+     * @returns Encoded APNG image bytes
+     */
+    encodeFrames(imageData: MultiFrameImageData): Promise<Uint8Array>;
+    private decodeFrameData;
+}
+//# sourceMappingURL=apng.d.ts.map