cross-image 0.1.2

package/esm/src/utils/webp_decoder.js

@@ -0,0 +1,493 @@
+/**
+ * WebP VP8L (Lossless) decoder implementation
+ *
+ * This module implements a pure JavaScript decoder for WebP lossless (VP8L) format.
+ * It supports:
+ * - Huffman coding (canonical Huffman codes)
+ * - LZ77 backward references for compression
+ * - Color cache for repeated colors
+ * - Simple and complex Huffman code tables
+ *
+ * Current limitations:
+ * - Does not support transforms (predictor, color, subtract green, color indexing)
+ * - Does not support meta Huffman codes
+ * - Does not support lossy WebP (VP8) format
+ *
+ * For images with transforms or lossy compression, the decoder will fall back
+ * to the runtime's ImageDecoder API if available.
+ *
+ * @see https://developers.google.com/speed/webp/docs/riff_container
+ * @see https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification
+ */
+// Helper to read little-endian values
+function readUint24LE(data, offset) {
+    return data[offset] | (data[offset + 1] << 8) | (data[offset + 2] << 16);
+}
+function readUint32LE(data, offset) {
+    return data[offset] | (data[offset + 1] << 8) |
+        (data[offset + 2] << 16) | (data[offset + 3] << 24);
+}
+// Huffman code table
+class HuffmanTable {
+    constructor() {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "singleSymbol", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        }); // For tables with only one symbol
+        this.root = {};
+    }
+    addCode(symbol, code, codeLength) {
+        // Handle single symbol case (code length 0)
+        if (codeLength === 0) {
+            this.singleSymbol = symbol;
+            return;
+        }
+        let node = this.root;
+        for (let i = codeLength - 1; i >= 0; i--) {
+            const bit = (code >> i) & 1;
+            if (bit === 0) {
+                if (!node.left)
+                    node.left = {};
+                node = node.left;
+            }
+            else {
+                if (!node.right)
+                    node.right = {};
+                node = node.right;
+            }
+        }
+        node.symbol = symbol;
+    }
+    readSymbol(reader) {
+        // Handle single symbol case
+        if (this.singleSymbol !== undefined) {
+            return this.singleSymbol;
+        }
+        let node = this.root;
+        while (node.symbol === undefined) {
+            const bit = reader.readBits(1);
+            node = bit === 0 ? node.left : node.right;
+            if (!node) {
+                throw new Error("Invalid Huffman code");
+            }
+        }
+        return node.symbol;
+    }
+}
+class BitReader {
+    constructor(data, offset) {
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pos", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "bitPos", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.data = data;
+        this.pos = offset;
+        this.bitPos = 0;
+        this.value = 0;
+    }
+    readBits(numBits) {
+        let result = 0;
+        for (let i = 0; i < numBits; i++) {
+            if (this.bitPos === 0) {
+                if (this.pos >= this.data.length) {
+                    throw new Error("Unexpected end of data");
+                }
+                this.value = this.data[this.pos++];
+                this.bitPos = 8;
+            }
+            result |= ((this.value >> (this.bitPos - 1)) & 1) << i;
+            this.bitPos--;
+        }
+        return result;
+    }
+    getPosition() {
+        return this.pos;
+    }
+    // Read bytes aligned to byte boundary
+    readBytes(count) {
+        // Align to byte boundary
+        if (this.bitPos !== 0 && this.bitPos !== 8) {
+            this.bitPos = 0;
+        }
+        if (this.pos + count > this.data.length) {
+            throw new Error("Unexpected end of data");
+        }
+        const result = this.data.slice(this.pos, this.pos + count);
+        this.pos += count;
+        return result;
+    }
+}
+export class WebPDecoder {
+    constructor(data) {
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.data = data;
+    }
+    decode() {
+        // Verify WebP signature
+        if (this.data.length < 12 ||
+            this.data[0] !== 0x52 || this.data[1] !== 0x49 || // "RI"
+            this.data[2] !== 0x46 || this.data[3] !== 0x46 || // "FF"
+            this.data[8] !== 0x57 || this.data[9] !== 0x45 || // "WE"
+            this.data[10] !== 0x42 || this.data[11] !== 0x50 // "BP"
+        ) {
+            throw new Error("Invalid WebP signature");
+        }
+        let pos = 12; // Skip RIFF header
+        let width = 0;
+        let height = 0;
+        let imageData = null;
+        // Parse chunks
+        while (pos + 8 <= this.data.length) {
+            const chunkType = String.fromCharCode(this.data[pos], this.data[pos + 1], this.data[pos + 2], this.data[pos + 3]);
+            const chunkSize = readUint32LE(this.data, pos + 4);
+            pos += 8;
+            if (pos + chunkSize > this.data.length)
+                break;
+            const chunkData = this.data.slice(pos, pos + chunkSize);
+            if (chunkType === "VP8L") {
+                // Lossless format - we can decode this
+                const result = this.decodeVP8L(chunkData);
+                width = result.width;
+                height = result.height;
+                imageData = result.data;
+                break; // Stop after decoding image data
+            }
+            else if (chunkType === "VP8 ") {
+                // Lossy format - not supported in pure JS decoder
+                throw new Error("WebP lossy (VP8) format not supported in pure JS decoder");
+            }
+            else if (chunkType === "VP8X") {
+                // Extended format header
+                if (chunkData.length >= 10) {
+                    width = readUint24LE(chunkData, 4) + 1;
+                    height = readUint24LE(chunkData, 7) + 1;
+                }
+            }
+            pos += chunkSize;
+            // Chunks are padded to even length
+            if (chunkSize % 2 === 1)
+                pos++;
+        }
+        if (!imageData || width === 0 || height === 0) {
+            throw new Error("Failed to decode WebP: no valid image data found");
+        }
+        return { width, height, data: imageData };
+    }
+    decodeVP8L(data) {
+        // VP8L signature
+        if (data[0] !== 0x2f) {
+            throw new Error("Invalid VP8L signature");
+        }
+        const bits = readUint32LE(data, 1);
+        const width = (bits & 0x3fff) + 1;
+        const height = ((bits >> 14) & 0x3fff) + 1;
+        const alphaUsed = (bits >> 28) & 1;
+        const versionNumber = (bits >> 29) & 7;
+        if (versionNumber !== 0) {
+            throw new Error(`Unsupported VP8L version: ${versionNumber}`);
+        }
+        // Create bit reader starting after header
+        const reader = new BitReader(data, 5);
+        // Decode image data
+        // This is a simplified decoder that handles basic lossless WebP
+        try {
+            const rgba = this.decodeImageData(reader, width, height, alphaUsed);
+            return { width, height, data: rgba };
+        }
+        catch (error) {
+            throw new Error(`VP8L decoding failed: ${error}`);
+        }
+    }
+    decodeImageData(reader, width, height, alphaUsed) {
+        // Read transform info
+        const useTransforms = reader.readBits(1);
+        if (useTransforms) {
+            // For simplicity, we don't support transforms in this basic decoder
+            // Transforms include: predictor, color, subtract green, color indexing
+            throw new Error("WebP transforms not supported in basic decoder");
+        }
+        // Read color cache info
+        const useColorCache = reader.readBits(1) === 1;
+        let colorCacheBits = 0;
+        let colorCacheSize = 0;
+        if (useColorCache) {
+            colorCacheBits = reader.readBits(4);
+            if (colorCacheBits < 1 || colorCacheBits > 11) {
+                throw new Error("Invalid color cache bits");
+            }
+            colorCacheSize = 1 << colorCacheBits;
+        }
+        // Read Huffman codes
+        const huffmanTables = this.readHuffmanCodes(reader, useColorCache, colorCacheBits);
+        // Decode the image using Huffman codes
+        const pixelData = new Uint8Array(width * height * 4);
+        let pixelIndex = 0;
+        const numPixels = width * height;
+        // Color cache for repeated colors
+        const colorCache = new Uint32Array(colorCacheSize);
+        for (let i = 0; i < numPixels;) {
+            // Read green channel (which determines the code type)
+            const green = huffmanTables.green.readSymbol(reader);
+            if (green < 256) {
+                // Literal pixel
+                const red = huffmanTables.red.readSymbol(reader);
+                const blue = huffmanTables.blue.readSymbol(reader);
+                const alpha = alphaUsed !== 0
+                    ? huffmanTables.alpha.readSymbol(reader)
+                    : 255;
+                pixelData[pixelIndex++] = red;
+                pixelData[pixelIndex++] = green;
+                pixelData[pixelIndex++] = blue;
+                pixelData[pixelIndex++] = alpha;
+                // Add to color cache if enabled
+                if (useColorCache) {
+                    const color = (alpha << 24) | (blue << 16) | (green << 8) | red;
+                    colorCache[i % colorCacheSize] = color;
+                }
+                i++;
+            }
+            else if (green < 256 + 24) {
+                // Backward reference (LZ77)
+                const lengthSymbol = green - 256;
+                const length = this.getLength(lengthSymbol, reader);
+                const distancePrefix = huffmanTables.distance.readSymbol(reader);
+                const distance = this.getDistance(distancePrefix, reader);
+                // Copy pixels from earlier in the stream
+                const srcIndex = pixelIndex - distance * 4;
+                if (srcIndex < 0) {
+                    throw new Error("Invalid backward reference");
+                }
+                for (let j = 0; j < length; j++) {
+                    pixelData[pixelIndex++] = pixelData[srcIndex + j * 4];
+                    pixelData[pixelIndex++] = pixelData[srcIndex + j * 4 + 1];
+                    pixelData[pixelIndex++] = pixelData[srcIndex + j * 4 + 2];
+                    pixelData[pixelIndex++] = pixelData[srcIndex + j * 4 + 3];
+                    // Add to color cache
+                    if (useColorCache) {
+                        const color = (pixelData[pixelIndex - 1] << 24) |
+                            (pixelData[pixelIndex - 2] << 16) |
+                            (pixelData[pixelIndex - 3] << 8) |
+                            pixelData[pixelIndex - 4];
+                        colorCache[(i + j) % colorCacheSize] = color;
+                    }
+                }
+                i += length;
+            }
+            else {
+                // Color cache reference
+                const cacheIndex = green - 256 - 24;
+                if (cacheIndex >= colorCacheSize) {
+                    throw new Error("Invalid color cache index");
+                }
+                const color = colorCache[cacheIndex];
+                pixelData[pixelIndex++] = color & 0xff; // R
+                pixelData[pixelIndex++] = (color >> 8) & 0xff; // G
+                pixelData[pixelIndex++] = (color >> 16) & 0xff; // B
+                pixelData[pixelIndex++] = (color >> 24) & 0xff; // A
+                i++;
+            }
+        }
+        return pixelData;
+    }
+    readHuffmanCodes(reader, useColorCache, colorCacheBits) {
+        // Read meta Huffman codes
+        const useMetaHuffman = reader.readBits(1);
+        if (useMetaHuffman) {
+            // Meta Huffman is more complex - for now throw error
+            throw new Error("Meta Huffman codes not yet supported");
+        }
+        // Read the main Huffman codes
+        // There are 5 Huffman code groups: green, red, blue, alpha, distance
+        // But we read 4 + optional distance code
+        const numCodeGroups = reader.readBits(4) + 4;
+        const tables = {
+            green: new HuffmanTable(),
+            red: new HuffmanTable(),
+            blue: new HuffmanTable(),
+            alpha: new HuffmanTable(),
+            distance: new HuffmanTable(),
+        };
+        const tableArray = [
+            tables.green,
+            tables.red,
+            tables.blue,
+            tables.alpha,
+            tables.distance,
+        ];
+        for (let i = 0; i < numCodeGroups && i < 5; i++) {
+            this.readHuffmanCode(reader, tableArray[i], useColorCache, colorCacheBits, i === 0);
+        }
+        return tables;
+    }
+    readHuffmanCode(reader, table, useColorCache, colorCacheBits, isGreen) {
+        const simple = reader.readBits(1);
+        if (simple) {
+            // Simple code - directly specify 1 or 2 symbols
+            const numSymbols = reader.readBits(1) + 1;
+            const isFirstEightBits = reader.readBits(1);
+            const symbols = [];
+            for (let i = 0; i < numSymbols; i++) {
+                const symbolBits = isFirstEightBits
+                    ? 1 + reader.readBits(7)
+                    : reader.readBits(8);
+                symbols.push(symbolBits);
+            }
+            // Build simple Huffman table
+            if (numSymbols === 1) {
+                // Single symbol - 0 bits needed
+                table.addCode(symbols[0], 0, 0);
+            }
+            else {
+                // Two symbols - 1 bit each
+                table.addCode(symbols[0], 0, 1);
+                table.addCode(symbols[1], 1, 1);
+            }
+        }
+        else {
+            // Complex code - read code lengths
+            const maxSymbol = isGreen
+                ? (256 + 24 + (useColorCache ? (1 << colorCacheBits) : 0))
+                : 256;
+            const codeLengths = this.readCodeLengths(reader, maxSymbol);
+            this.buildHuffmanTable(table, codeLengths);
+        }
+    }
+    readCodeLengths(reader, maxSymbol) {
+        // Read code length codes (used to encode the actual code lengths)
+        const numCodeLengthCodes = reader.readBits(4) + 4;
+        const codeLengthCodeLengths = new Array(19).fill(0);
+        // Code length code order
+        const codeLengthCodeOrder = [
+            17,
+            18,
+            0,
+            1,
+            2,
+            3,
+            4,
+            5,
+            16,
+            6,
+            7,
+            8,
+            9,
+            10,
+            11,
+            12,
+            13,
+            14,
+            15,
+        ];
+        for (let i = 0; i < numCodeLengthCodes; i++) {
+            codeLengthCodeLengths[codeLengthCodeOrder[i]] = reader.readBits(3);
+        }
+        // Build code length Huffman table
+        const codeLengthTable = new HuffmanTable();
+        this.buildHuffmanTable(codeLengthTable, codeLengthCodeLengths);
+        // Read actual code lengths
+        const codeLengths = new Array(maxSymbol).fill(0);
+        let i = 0;
+        while (i < maxSymbol) {
+            const code = codeLengthTable.readSymbol(reader);
+            if (code < 16) {
+                // Literal code length
+                codeLengths[i++] = code;
+            }
+            else if (code === 16) {
+                // Repeat previous code length 3-6 times
+                const repeatCount = reader.readBits(2) + 3;
+                const prevLength = i > 0 ? codeLengths[i - 1] : 0;
+                for (let j = 0; j < repeatCount && i < maxSymbol; j++) {
+                    codeLengths[i++] = prevLength;
+                }
+            }
+            else if (code === 17) {
+                // Repeat 0 for 3-10 times
+                const repeatCount = reader.readBits(3) + 3;
+                i += repeatCount;
+            }
+            else if (code === 18) {
+                // Repeat 0 for 11-138 times
+                const repeatCount = reader.readBits(7) + 11;
+                i += repeatCount;
+            }
+        }
+        return codeLengths;
+    }
+    buildHuffmanTable(table, codeLengths) {
+        // Build canonical Huffman codes
+        const maxCodeLength = Math.max(...codeLengths);
+        const lengthCounts = new Array(maxCodeLength + 1).fill(0);
+        for (const length of codeLengths) {
+            if (length > 0) {
+                lengthCounts[length]++;
+            }
+        }
+        // Generate codes
+        let code = 0;
+        const nextCode = new Array(maxCodeLength + 1).fill(0);
+        for (let i = 1; i <= maxCodeLength; i++) {
+            code = (code + lengthCounts[i - 1]) << 1;
+            nextCode[i] = code;
+        }
+        // Assign codes to symbols
+        for (let symbol = 0; symbol < codeLengths.length; symbol++) {
+            const length = codeLengths[symbol];
+            if (length > 0) {
+                table.addCode(symbol, nextCode[length], length);
+                nextCode[length]++;
+            }
+        }
+    }
+    getLength(symbol, reader) {
+        // Length encoding for backward references
+        if (symbol < 4) {
+            return symbol + 1;
+        }
+        const extraBits = (symbol - 2) >> 1;
+        const base = ((2 + (symbol & 1)) << extraBits) + 1;
+        return base + reader.readBits(extraBits);
+    }
+    getDistance(symbol, reader) {
+        // Distance encoding for backward references
+        if (symbol < 4) {
+            return symbol + 1;
+        }
+        const extraBits = (symbol - 2) >> 1;
+        const base = ((2 + (symbol & 1)) << extraBits) + 1;
+        return base + reader.readBits(extraBits);
+    }
+}

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

@@ -0,0 +1,72 @@
+/**
+ * WebP VP8L (Lossless) encoder implementation with quality-based quantization
+ *
+ * This module implements a pure JavaScript encoder for WebP lossless (VP8L) format.
+ * It supports:
+ * - Lossless encoding (quality=100) with Huffman coding
+ * - Lossy encoding (quality<100) using color quantization while still using VP8L format
+ * - Simple Huffman coding (1-2 symbols per channel)
+ * - Complex Huffman coding for channels with many unique values (3+ symbols)
+ * - Literal pixel encoding (no transforms applied)
+ *
+ * Current limitations:
+ * - Does not use transforms (predictor, color, subtract green, color indexing)
+ * - Does not use LZ77 backward references (planned for future)
+ * - Does not use color cache (planned for future)
+ * - Lossy mode uses simple quantization, not true VP8 lossy encoding
+ * - Intended as a fallback when OffscreenCanvas is not available
+ *
+ * This encoder produces valid WebP lossless files with optional quality-based
+ * color quantization for lossy compression. For true VP8 lossy encoding with
+ * better compression, use the runtime's OffscreenCanvas API when available.
+ *
+ * @see https://developers.google.com/speed/webp/docs/riff_container
+ * @see https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification
+ */
+export declare class WebPEncoder {
+    private width;
+    private height;
+    private data;
+    private quality;
+    constructor(width: number, height: number, rgba: Uint8Array);
+    encode(quality?: number): Uint8Array;
+    private encodeVP8L;
+    private hasAlphaChannel;
+    /**
+     * Quantize image data based on quality setting
+     * Quality 100 = no quantization (lossless)
+     * Quality 1-99 = quantize colors to reduce bit depth
+     * This creates a "lossy" effect while still using VP8L format
+     */
+    private quantizeImageData;
+    private encodeImageData;
+    /**
+     * Write Huffman code for a channel (either simple or complex)
+     * Returns the Huffman codes for encoding pixels
+     */
+    private writeHuffmanCode;
+    /**
+     * Write a symbol using its Huffman code
+     */
+    private writeSymbol;
+    private writeSimpleHuffmanCode;
+    /**
+     * Calculate optimal code lengths for symbols using standard Huffman algorithm
+     * Returns an array where index is the symbol and value is the code length
+     */
+    private calculateCodeLengths;
+    /**
+     * Build canonical Huffman codes from code lengths
+     * Returns a map from symbol to {code, length}
+     */
+    private buildCanonicalCodes;
+    /**
+     * RLE encode code lengths using special codes 16, 17, 18
+     */
+    private rleEncodeCodeLengths;
+    /**
+     * Write complex Huffman code using code lengths
+     */
+    private writeComplexHuffmanCode;
+}
+//# sourceMappingURL=webp_encoder.d.ts.map

package/esm/src/utils/webp_encoder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webp_encoder.d.ts","sourceRoot":"","sources":["../../../src/src/utils/webp_encoder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AA2DH,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,OAAO,CAAS;gBAEZ,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU;IAO3D,MAAM,CAAC,OAAO,GAAE,MAAY,GAAG,UAAU;IAmDzC,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,eAAe;IAUvB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,eAAe;IA8EvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IA4BxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,sBAAsB;IA4B9B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAoF5B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAyC3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA8D5B;;OAEG;IACH,OAAO,CAAC,uBAAuB;CA6GhC"}