cross-image 0.1.4 → 0.2.0

package/esm/src/utils/webp_decoder.js

@@ -51,6 +51,22 @@ class HuffmanTable {
             this.singleSymbol = symbol;
             return;
         }
+        // Build Huffman tree
+        // Note: WebP uses LSB-first bit packing for the bitstream, but Huffman codes
+        // are typically described MSB-first. However, the spec says:
+        // "The bits of the code are read from the stream LSB first."
+        // This means if code is 01 (binary), we read 1 then 0?
+        // Actually, standard canonical Huffman codes are read MSB to LSB from the stream.
+        // But WebP bit reader reads LSB to MSB from bytes.
+        // Let's check the spec carefully.
+        // "The bits of the code are read from the stream LSB first."
+        // This usually means the bit reader returns bits in order.
+        // If we have code 0x2 (binary 10) with length 2.
+        // If we write it MSB first: 1, then 0.
+        // If we read it: readBits(1) -> 1, readBits(1) -> 0.
+        // This matches how we build the tree (left=0, right=1).
+        // Wait, addCode uses (code >> i) & 1. This is MSB first.
+        // So we expect the first bit read to be the MSB of the code.
         let node = this.root;
         for (let i = codeLength - 1; i >= 0; i--) {
             const bit = (code >> i) & 1;
@@ -77,6 +93,7 @@ class HuffmanTable {
             const bit = reader.readBits(1);
             node = bit === 0 ? node.left : node.right;
             if (!node) {
+                // console.log("Invalid Huffman code - walked off tree");
                 throw new Error("Invalid Huffman code");
             }
         }
@@ -111,21 +128,21 @@ class BitReader {
         });
         this.data = data;
         this.pos = offset;
-        this.bitPos = 0;
+        this.bitPos = 8; // Start at 8 to trigger first byte read
         this.value = 0;
     }
     readBits(numBits) {
         let result = 0;
         for (let i = 0; i < numBits; i++) {
-            if (this.bitPos === 0) {
+            if (this.bitPos === 8) {
                 if (this.pos >= this.data.length) {
                     throw new Error("Unexpected end of data");
                 }
                 this.value = this.data[this.pos++];
-                this.bitPos = 8;
+                this.bitPos = 0;
             }
-            result |= ((this.value >> (this.bitPos - 1)) & 1) << i;
-            this.bitPos--;
+            result |= ((this.value >> this.bitPos) & 1) << i;
+            this.bitPos++;
         }
         return result;
     }
@@ -135,8 +152,8 @@ class BitReader {
     // Read bytes aligned to byte boundary
     readBytes(count) {
         // Align to byte boundary
-        if (this.bitPos !== 0 && this.bitPos !== 8) {
-            this.bitPos = 0;
+        if (this.bitPos !== 8) {
+            this.bitPos = 8; // Skip remaining bits in current byte
         }
         if (this.pos + count > this.data.length) {
             throw new Error("Unexpected end of data");
@@ -334,8 +351,6 @@ export class WebPDecoder {
         }
         // 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(),
@@ -350,7 +365,7 @@ export class WebPDecoder {
             tables.alpha,
             tables.distance,
         ];
-        for (let i = 0; i < numCodeGroups && i < 5; i++) {
+        for (let i = 0; i < 5; i++) {
             this.readHuffmanCode(reader, tableArray[i], useColorCache, colorCacheBits, i === 0);
         }
         return tables;
@@ -364,8 +379,8 @@ export class WebPDecoder {
             const symbols = [];
             for (let i = 0; i < numSymbols; i++) {
                 const symbolBits = isFirstEightBits
-                    ? 1 + reader.readBits(7)
-                    : reader.readBits(8);
+                    ? reader.readBits(8)
+                    : reader.readBits(1);
                 symbols.push(symbolBits);
             }
             // Build simple Huffman table
@@ -417,6 +432,12 @@ export class WebPDecoder {
         for (let i = 0; i < numCodeLengthCodes; i++) {
             codeLengthCodeLengths[codeLengthCodeOrder[i]] = reader.readBits(3);
         }
+        // Read max_symbol (trimmed length indicator)
+        // If 1, we read n_bit and then n_bit bits for max_symbol?
+        // Subagent said "write_trimmed_length".
+        // If 0, we don't trim.
+        // We just read 1 bit and ignore it for now (assuming 0).
+        const _trimmed = reader.readBits(1);
         // Build code length Huffman table
         const codeLengthTable = new HuffmanTable();
         this.buildHuffmanTable(codeLengthTable, codeLengthCodeLengths);
@@ -451,6 +472,20 @@ export class WebPDecoder {
         return codeLengths;
     }
     buildHuffmanTable(table, codeLengths) {
+        // Check for single symbol optimization (VP8L specific)
+        let nonZeroCount = 0;
+        let singleSymbol = -1;
+        for (let i = 0; i < codeLengths.length; i++) {
+            if (codeLengths[i] > 0) {
+                nonZeroCount++;
+                singleSymbol = i;
+            }
+        }
+        if (nonZeroCount === 1) {
+            // If only one symbol, it has 0 length in the bitstream
+            table.addCode(singleSymbol, 0, 0);
+            return;
+        }
         // Build canonical Huffman codes
         const maxCodeLength = Math.max(...codeLengths);
         const lengthCounts = new Array(maxCodeLength + 1).fill(0);

package/esm/src/utils/webp_encoder.js

@@ -55,30 +55,30 @@ class BitWriter {
         });
     }
     writeBits(value, numBits) {
-        // Pack bits to match how the decoder reads them
-        // The decoder reads from MSB to LSB of each byte
-        // So we write from MSB down as well
+        // Pack bits LSB first (standard WebP/VP8L order)
         for (let i = 0; i < numBits; i++) {
             const bit = (value >> i) & 1;
-            // Write bit at the current position (counting from MSB)
-            // bitCount represents how many bits we've written
-            // Position in current byte = 7 - (bitCount % 8)
-            if (this.bitCount % 8 === 0) {
-                this.bits = 0; // Start new byte
+            // If we've filled the current byte, push it and start a new one
+            if (this.bitCount > 0 && this.bitCount % 8 === 0) {
+                this.bytes.push(this.bits);
+                this.bits = 0;
             }
-            const bitPos = 7 - (this.bitCount % 8);
+            const bitPos = this.bitCount % 8;
             this.bits |= bit << bitPos;
             this.bitCount++;
-            if (this.bitCount % 8 === 0) {
-                this.bytes.push(this.bits);
-            }
         }
     }
     flush() {
         if (this.bitCount % 8 !== 0) {
             this.bytes.push(this.bits);
             this.bits = 0;
-            this.bitCount = 0;
+            // Do not reset bitCount here as it tracks total bits written
+        }
+        else if (this.bitCount > 0 && this.bytes.length * 8 < this.bitCount) {
+            // Edge case: if we just finished a byte but haven't pushed it yet
+            // (The loop pushes at the START of the next bit, so we might have a full byte pending)
+            this.bytes.push(this.bits);
+            this.bits = 0;
         }
     }
     getBytes() {
@@ -241,10 +241,6 @@ export class WebPEncoder {
         writer.writeBits(0, 1);
         // No meta Huffman codes
         writer.writeBits(0, 1);
-        // Number of code groups: Always 5 (green, red, blue, alpha, distance)
-        // Even without LZ77, we must provide all 5 Huffman codes
-        const numCodeGroups = 5;
-        writer.writeBits(numCodeGroups - 4, 4); // 1 means 5 groups
         // Apply quantization if quality < 100
         const encodingData = this.quantizeImageData();
         // Collect symbol frequencies for each channel
@@ -353,13 +349,13 @@ export class WebPEncoder {
         if (symbols.length === 1) {
             // Single symbol
             writer.writeBits(0, 1); // num_symbols = 1 (0 + 1)
-            writer.writeBits(0, 1); // is_first_8bits = 0
+            writer.writeBits(1, 1); // is_first_8bits = 1 (use 8 bits)
             writer.writeBits(symbols[0], 8); // symbol
         }
         else if (symbols.length === 2) {
             // Two symbols
             writer.writeBits(1, 1); // num_symbols = 2 (1 + 1)
-            writer.writeBits(0, 1); // is_first_8bits = 0
+            writer.writeBits(1, 1); // is_first_8bits = 1 (use 8 bits)
             writer.writeBits(symbols[0], 8); // first symbol
             writer.writeBits(symbols[1], 8); // second symbol
         }
@@ -378,9 +374,11 @@ export class WebPEncoder {
         const symbols = Array.from(frequencies.keys()).sort((a, b) => a - b);
         if (symbols.length === 0)
             return codeLengths;
-        // For a single symbol, use code length 0
+        // For a single symbol, use code length 1
+        // (Canonical Huffman codes require length >= 1)
         if (symbols.length === 1) {
-            codeLengths[symbols[0]] = 0;
+            // console.log(`Single symbol ${symbols[0]}, forcing length 1`);
+            codeLengths[symbols[0]] = 1;
             return codeLengths;
         }
         // For two symbols, use code length 1 for both
@@ -389,27 +387,64 @@ export class WebPEncoder {
             codeLengths[symbols[1]] = 1;
             return codeLengths;
         }
-        const nodes = symbols.map((symbol) => ({
+        let nodes = symbols.map((symbol) => ({
             freq: frequencies.get(symbol),
             symbol,
         }));
-        // Build tree by repeatedly combining two smallest nodes
-        while (nodes.length > 1) {
-            // Sort by frequency (smallest first)
-            nodes.sort((a, b) => a.freq - b.freq);
-            // Take two smallest nodes
-            const left = nodes.shift();
-            const right = nodes.shift();
-            // Create parent node
-            const parent = {
-                freq: left.freq + right.freq,
-                left,
-                right,
-            };
-            nodes.push(parent);
+        // Helper to build tree
+        const buildTree = (leafs) => {
+            const queue = [...leafs];
+            while (queue.length > 1) {
+                queue.sort((a, b) => a.freq - b.freq);
+                const left = queue.shift();
+                const right = queue.shift();
+                queue.push({
+                    freq: left.freq + right.freq,
+                    left,
+                    right,
+                });
+            }
+            return queue[0];
+        };
+        let root = buildTree(nodes);
+        // Check max depth
+        let maxDepth = 0;
+        const checkDepth = (node, depth) => {
+            if (node.symbol !== undefined) {
+                maxDepth = Math.max(maxDepth, depth);
+            }
+            else {
+                if (node.left)
+                    checkDepth(node.left, depth + 1);
+                if (node.right)
+                    checkDepth(node.right, depth + 1);
+            }
+        };
+        checkDepth(root, 0);
+        // If tree is too deep, flatten frequencies and rebuild
+        let attempts = 0;
+        while (maxDepth > maxCodeLength && attempts < 5) {
+            // console.log(`Tree too deep (${maxDepth} > ${maxCodeLength}), flattening...`);
+            attempts++;
+            // Add bias to frequencies to flatten the tree
+            // Increase bias with each attempt
+            const bias = (Math.ceil(root.freq / (symbols.length * 2)) || 1) *
+                attempts;
+            nodes = symbols.map((symbol) => ({
+                freq: frequencies.get(symbol) + bias,
+                symbol,
+            }));
+            root = buildTree(nodes);
+            // Re-check depth
+            maxDepth = 0;
+            checkDepth(root, 0);
+        }
+        if (maxDepth > maxCodeLength) {
+            console.warn(`Failed to reduce Huffman tree depth to ${maxCodeLength} (current: ${maxDepth})`);
+            // Force hard limit by sorting and assigning lengths?
+            // For now, let's just see if this is happening.
         }
         // Calculate code lengths by traversing tree (iterative to avoid deep recursion)
-        const root = nodes[0];
         const stack = [{
                 node: root,
                 depth: 0,
@@ -417,6 +452,7 @@ export class WebPEncoder {
         while (stack.length > 0) {
             const { node, depth } = stack.pop();
             if (node.symbol !== undefined) {
+                // Clamp depth to maxCodeLength (should be safe now with flattening heuristic)
                 codeLengths[node.symbol] = Math.min(depth, maxCodeLength);
             }
             else {
@@ -589,13 +625,34 @@ export class WebPEncoder {
         }
         numCodeLengthCodes = Math.max(4, numCodeLengthCodes);
         // Write number of code length codes
+        // console.log(`Complex Huffman: numCodeLengthCodes=${numCodeLengthCodes}, rleEncoded.length=${rleEncoded.length}`);
         writer.writeBits(numCodeLengthCodes - 4, 4);
         // Write code length code lengths
         for (let i = 0; i < numCodeLengthCodes; i++) {
             writer.writeBits(codeLengthCodeLengths[codeLengthCodeOrder[i]], 3);
         }
+        // Write max_symbol is encoded? No, it's write_trimmed_length
+        // VP8L spec says: "int max_symbol is read."
+        // Wait, subagent said "write_trimmed_length".
+        // Let's check the spec or libwebp source if possible.
+        // But assuming subagent is correct:
+        writer.writeBits(0, 1); // write_trimmed_length = 0 (no trimming)
         // Build canonical codes for code lengths
         const codeLengthCodes = this.buildCanonicalCodes(codeLengthCodeLengths);
+        // Check for single symbol optimization (VP8L specific)
+        let nonZeroCount = 0;
+        for (const len of codeLengthCodeLengths) {
+            if (len > 0)
+                nonZeroCount++;
+        }
+        if (nonZeroCount === 1) {
+            // If only one symbol is used in the code length alphabet,
+            // we don't write any bits for the code itself in the RLE stream.
+            // The symbol is implicit because it's the only one with non-zero length in the header.
+            for (const [_symbol, info] of codeLengthCodes) {
+                info.length = 0;
+            }
+        }
         // Write RLE-encoded code lengths using code length codes
         for (let i = 0; i < rleEncoded.length; i++) {
             const code = rleEncoded[i];
@@ -605,8 +662,9 @@ export class WebPEncoder {
             }
             // Write the Huffman code bits from MSB to LSB
             // This matches how the decoder's addCode builds the tree
-            for (let bit = huffCode.length - 1; bit >= 0; bit--) {
-                writer.writeBits((huffCode.code >> bit) & 1, 1);
+            // (First bit written is MSB, which corresponds to top of tree)
+            for (let i = huffCode.length - 1; i >= 0; i--) {
+                writer.writeBits((huffCode.code >> i) & 1, 1);
             }
             // Write extra bits for special codes
             if (code === 16) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cross-image",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A pure JavaScript, dependency-free, cross-runtime image processing library for Deno, Node.js, and Bun.",
   "keywords": [
     "image",
@@ -11,6 +11,9 @@
     "gif",
     "tiff",
     "bmp",
+    "dng",
+    "pam",
+    "pcx",
     "cross-runtime",
     "deno",
     "node",

package/script/mod.d.ts

@@ -2,23 +2,45 @@
  * @module @cross/image
  *
  * A pure JavaScript, dependency-free, cross-runtime image processing library.
- * Supports reading, resizing, and saving common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, RAW).
+ * Supports decoding, resizing, and encoding common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, DNG, PAM, PCX).
+ * Includes image processing capabilities like compositing, level adjustments, and pixel manipulation.
  *
  * @example
  * ```ts
  * import { Image } from "@cross/image";
  *
- * // Read an image
+ * // Decode an image
  * const data = await Deno.readFile("input.png");
- * const image = await Image.read(data);
+ * const image = await Image.decode(data);
  *
- * // Resize it
- * image.resize({ width: 200, height: 200 });
+ * // Apply image processing
+ * image
+ *   .resize({ width: 200, height: 200 })
+ *   .brightness(0.1)
+ *   .contrast(0.2);
  *
- * // Save as different format
- * const output = await image.save("jpeg");
+ * // Encode as different format
+ * const output = await image.encode("jpeg");
  * await Deno.writeFile("output.jpg", output);
  * ```
+ *
+ * @example
+ * ```ts
+ * import { Image } from "@cross/image";
+ *
+ * // Create a blank canvas
+ * const canvas = Image.create(400, 300, 255, 255, 255);
+ *
+ * // Draw on it
+ * canvas.fillRect(50, 50, 100, 100, 255, 0, 0, 255);
+ *
+ * // Load and composite another image
+ * const overlay = await Image.decode(await Deno.readFile("logo.png"));
+ * canvas.composite(overlay, 10, 10, 0.8);
+ *
+ * // Save the result
+ * await Deno.writeFile("result.png", await canvas.encode("png"));
+ * ```
  */
 export { Image } from "./src/image.js";
 export type { ASCIIOptions, FrameMetadata, ImageData, ImageFormat, ImageFrame, ImageMetadata, MultiFrameImageData, ResizeOptions, WebPEncodeOptions, } from "./src/types.js";
@@ -28,6 +50,8 @@ 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 { RAWFormat } from "./src/formats/raw.js";
+export { DNGFormat } from "./src/formats/dng.js";
+export { PAMFormat } from "./src/formats/pam.js";
+export { PCXFormat } from "./src/formats/pcx.js";
 export { ASCIIFormat } from "./src/formats/ascii.js";
 //# sourceMappingURL=mod.d.ts.map

package/script/mod.js

@@ -3,26 +3,48 @@
  * @module @cross/image
  *
  * A pure JavaScript, dependency-free, cross-runtime image processing library.
- * Supports reading, resizing, and saving common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, RAW).
+ * Supports decoding, resizing, and encoding common image formats (PNG, JPEG, WebP, GIF, TIFF, BMP, DNG, PAM, PCX).
+ * Includes image processing capabilities like compositing, level adjustments, and pixel manipulation.
  *
  * @example
  * ```ts
  * import { Image } from "@cross/image";
  *
- * // Read an image
+ * // Decode an image
  * const data = await Deno.readFile("input.png");
- * const image = await Image.read(data);
+ * const image = await Image.decode(data);
  *
- * // Resize it
- * image.resize({ width: 200, height: 200 });
+ * // Apply image processing
+ * image
+ *   .resize({ width: 200, height: 200 })
+ *   .brightness(0.1)
+ *   .contrast(0.2);
  *
- * // Save as different format
- * const output = await image.save("jpeg");
+ * // Encode as different format
+ * const output = await image.encode("jpeg");
  * await Deno.writeFile("output.jpg", output);
  * ```
+ *
+ * @example
+ * ```ts
+ * import { Image } from "@cross/image";
+ *
+ * // Create a blank canvas
+ * const canvas = Image.create(400, 300, 255, 255, 255);
+ *
+ * // Draw on it
+ * canvas.fillRect(50, 50, 100, 100, 255, 0, 0, 255);
+ *
+ * // Load and composite another image
+ * const overlay = await Image.decode(await Deno.readFile("logo.png"));
+ * canvas.composite(overlay, 10, 10, 0.8);
+ *
+ * // Save the result
+ * await Deno.writeFile("result.png", await canvas.encode("png"));
+ * ```
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASCIIFormat = exports.RAWFormat = 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.BMPFormat = exports.TIFFFormat = exports.GIFFormat = exports.WebPFormat = exports.JPEGFormat = 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");
@@ -37,7 +59,11 @@ 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 raw_js_1 = require("./src/formats/raw.js");
-Object.defineProperty(exports, "RAWFormat", { enumerable: true, get: function () { return raw_js_1.RAWFormat; } });
+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");
+Object.defineProperty(exports, "PAMFormat", { enumerable: true, get: function () { return pam_js_1.PAMFormat; } });
+var pcx_js_1 = require("./src/formats/pcx.js");
+Object.defineProperty(exports, "PCXFormat", { enumerable: true, get: function () { return pcx_js_1.PCXFormat; } });
 var ascii_js_1 = require("./src/formats/ascii.js");
 Object.defineProperty(exports, "ASCIIFormat", { enumerable: true, get: function () { return ascii_js_1.ASCIIFormat; } });

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

@@ -0,0 +1,27 @@
+import type { ImageData } from "../types.js";
+import { TIFFFormat } from "./tiff.js";
+/**
+ * DNG format handler
+ * Implements a basic Linear DNG (Digital Negative) writer.
+ * DNG is based on TIFF/EP. This implementation creates a valid DNG
+ * containing uncompressed linear RGB data (demosaiced).
+ */
+export declare class DNGFormat extends TIFFFormat {
+    /** Format name identifier */
+    readonly name = "dng";
+    /** MIME type for DNG images */
+    readonly mimeType = "image/x-adobe-dng";
+    /**
+     * Check if the given data is a DNG image
+     * @param data Raw image data to check
+     * @returns true if data has DNG signature (TIFF signature + DNGVersion tag)
+     */
+    canDecode(data: Uint8Array): boolean;
+    /**
+     * Encode RGBA image data to DNG format (Linear DNG)
+     * @param imageData Image data to encode
+     * @returns Encoded DNG image bytes
+     */
+    encode(imageData: ImageData): Promise<Uint8Array>;
+}
+//# sourceMappingURL=dng.d.ts.map