imagescript 3.1.0 → 3.2.1

package/README.md

@@ -9,7 +9,7 @@
 
 **ImageScript** is a zero-dependency alternative to common JavaScript bitmap image manipulation tools. Every codec and
 renderer is written in TypeScript: no WebAssembly, no native binaries, no npm dependencies, no install scripts. The
-package is about 140 kB (compressed) and runs in Node.js 22.13 or newer (including Alpine/musl, ARM and bundled
+package is about 160 kB (compressed) and runs in Node.js 22.13 or newer (including Alpine/musl, ARM and bundled
 serverless functions), Deno, Bun and browsers. It works with both `import` and `require()`, type definitions are included.
 
 ```sh
@@ -38,7 +38,8 @@ deno add jsr:@matmen/imagescript     # Deno (npm:imagescript works too)
 - Image manipulation functions ([crop](https://imagescript.matmen.dev/classes/Image.html#crop)
   , [rotate](https://imagescript.matmen.dev/classes/Image.html#rotate)
   , [cropCircle](https://imagescript.matmen.dev/classes/Image.html#cropcircle)
-  , [roundCorners](https://imagescript.matmen.dev/classes/Image.html#roundcorners), ...)
+  , [roundCorners](https://imagescript.matmen.dev/classes/Image.html#roundcorners)
+  , [trim](https://imagescript.matmen.dev/classes/Image.html#trim), ...)
 - Filters and color adjustments ([blur](https://imagescript.matmen.dev/classes/Image.html#blur)
   , [sharpen](https://imagescript.matmen.dev/classes/Image.html#sharpen)
   , [brightness](https://imagescript.matmen.dev/classes/Image.html#brightness)
@@ -53,7 +54,7 @@ deno add jsr:@matmen/imagescript     # Deno (npm:imagescript works too)
   and [TGAs](https://imagescript.matmen.dev/classes/Image.html#encodetga)
 - Encoding animations as [GIF](https://imagescript.matmen.dev/classes/Animation.html#encodegif),
   [APNG](https://imagescript.matmen.dev/classes/Animation.html#encodeapng) and lossless
-  [WebP](https://imagescript.matmen.dev/classes/Animation.html#encodewebp)
+  [WebP](https://imagescript.matmen.dev/classes/Animation.html#encodewebp), storing only what changes from frame to frame
 
 ---
 
@@ -77,7 +78,7 @@ const { Image } = require('imagescript');
 All coordinates are 0-based, `(0, 0)` is the top left pixel.
 
 A bigger example is the [README image generation](https://github.com/matmen/ImageScript/blob/master/tests/readme.js).
-Upgrading from 1.x? Version 3 has breaking changes (0-based coordinates, removed WebP encoding, Node.js 22.13+, ...),
+Upgrading from 1.x? Version 3 has breaking changes (0-based coordinates, removed lossy WebP encoding, Node.js 22.13+, ...),
 see the [changelog](https://github.com/matmen/ImageScript/blob/master/CHANGELOG.md). There is no 2.x release, the number was skipped because of the old experimental
 `imagescript/v2` API.
 
@@ -85,6 +86,13 @@ see the [changelog](https://github.com/matmen/ImageScript/blob/master/CHANGELOG.
 
 ---
 
+### Benchmarks
+
+[bench/](bench/README.md) compares ImageScript to Jimp, image-js, Photon, sharp and @napi-rs/canvas: speed of decoding,
+encoding, image operations and rendering, encoded file sizes and install sizes. It runs for every release.
+
+---
+
 ### Credits
 
 The deflate/inflate implementation is derived from [fflate](https://github.com/101arrowz/fflate) and the CRC-32 from

package/dist/animation.d.ts

@@ -1,19 +1,67 @@
 import { BinaryData } from './util/mem.js';
-import { ResizeMode } from './image.js';
+import { ResizeMode, ResizeOptions } from './image.js';
 import { Frame } from './frame.js';
+import { Metadata } from './metadata.js';
+/** Options of {@link Animation} */
+export interface AnimationOptions {
+    /** How many times to repeat the animation (-1 = forever, 0 = play once). Default: `-1` */
+    loopCount?: number;
+}
+/** Options of {@link Animation.decode} */
+export interface AnimationDecodeOptions {
+    /** Whether to stop decoding after the first frame. Default: `false` */
+    onlyFirstFrame?: boolean;
+}
+/** Options of {@link Animation.encodeWebP}, and those all animation encoders have */
+export interface AnimationEncodeOptions {
+    /** Metadata to include, see {@link Metadata} */
+    metadata?: Metadata;
+    /**
+     * Whether to store each frame as the area that changed since the frame before and merge identical frames, which
+     * usually makes files a lot smaller. The file shows the same animation either way, but only decodes to the same
+     * frames without it, which also encodes faster when little changes. Default: `true`
+     */
+    optimize?: boolean;
+}
+/** Options of {@link Animation.encodeGIF} */
+export interface GIFEncodeOptions extends AnimationEncodeOptions {
+    /** 1-100, scales the palette size from 8 colors (1) to 256 colors (90 and above). Default: `95` */
+    quality?: number;
+}
+/** Options of {@link Animation.encodeAPNG} */
+export interface APNGEncodeOptions extends AnimationEncodeOptions {
+    /** The zlib compression level (0-9), higher is smaller but slower. Default: `1` */
+    compression?: number;
+}
 /**
- * An animation: an array of frames that can be decoded from and encoded to GIF, APNG and WebP.
- * Array methods like map and filter return plain arrays.
+ * An animation: frames ({@link Animation.frames}) that can be decoded from and encoded to GIF, APNG and WebP.
+ *
+ * The animation itself is an array of its frames too (`animation[0]`, `animation.map(...)`), which is deprecated: in 4.0
+ * it won't extend `Array` anymore, use {@link Animation.frames} instead. Array methods like map and filter return
+ * plain arrays.
  */
 export declare class Animation extends Array<Frame> {
     /** How many times to repeat the animation (-1 = forever, 0 = play once) */
     loopCount: number;
+    /**
+     * Creates a new animation
+     * @param frames The frames to create the animation from
+     * @param options See {@link AnimationOptions}
+     */
+    constructor(frames: Frame[], options?: AnimationOptions);
     /**
      * Creates a new animation
      * @param frames The frames to create the animation from
      * @param loopCount How many times to repeat the animation (-1 = forever, 0 = play once)
      */
     constructor(frames: Frame[], loopCount?: number);
+    /**
+     * The animation's frames: an array that changes the animation when it's changed (e.g. `push()`, `splice()`, or
+     * setting an index), and can be replaced as a whole
+     */
+    get frames(): Frame[];
+    /** Replaces the animation's frames */
+    set frames(frames: Frame[]);
     /** The animation's width */
     get width(): number;
     /** The animation's height */
@@ -24,28 +72,65 @@ export declare class Animation extends Array<Frame> {
     /**
      * Returns a new animation of the same class containing a range of this one's frames
      * (same semantics as Array.prototype.slice)
+     * @deprecated Use `new Animation(animation.frames.slice(start, end), animation.loopCount)`: in 4.0 animations
+     *     aren't arrays anymore
      */
     slice(start?: number, end?: number): this;
+    /**
+     * Resizes the animation to the given dimensions, scaling every frame and its offsets proportionally.
+     * Use {@link Image.RESIZE_AUTO} as either width or height to automatically preserve the aspect ratio.
+     */
+    resize(width: number, height: number, options?: ResizeOptions): this;
     /**
      * Resizes the animation to the given dimensions, scaling every frame and its offsets proportionally.
      * Use {@link Image.RESIZE_AUTO} as either width or height to automatically preserve the aspect ratio.
      */
     resize(width: number, height: number, mode?: ResizeMode): this;
     /**
-     * Encodes the animation as GIF
+     * Encodes the animation as GIF. Like all encoders, it stores each frame as the area that changed since the frame
+     * before and merges identical frames (unless the `optimize` option is false), so the file decodes to what the
+     * animation shows, but not necessarily to the same frames. Semi-transparent pixels become opaque or transparent
+     * after the frames are composited
+     * @param options See {@link GIFEncodeOptions}
+     */
+    encodeGIF(options?: GIFEncodeOptions): Promise<Uint8Array>;
+    /**
+     * Encodes the animation as GIF. Like all encoders, it stores each frame as the area that changed since the frame
+     * before and merges identical frames (unless the `optimize` option is false), so the file decodes to what the
+     * animation shows, but not necessarily to the same frames. Semi-transparent pixels become opaque or transparent
+     * after the frames are composited
      * @param quality 1-100, scales the palette size from 8 colors (1) to 256 colors (90 and above)
      */
     encodeGIF(quality?: number): Promise<Uint8Array>;
     /**
      * Encodes the animation as APNG (animated PNG, lossless and with full alpha). Viewers without APNG support show
-     * the first frame
+     * the first frame. Each frame is stored as the area that changed since the frame before, identical frames are
+     * merged (unless the `optimize` option is false): the file shows exactly the same animation, but doesn't
+     * necessarily decode to the same frames
+     * @param options See {@link APNGEncodeOptions}
+     */
+    encodeAPNG(options?: APNGEncodeOptions): Promise<Uint8Array>;
+    /**
+     * Encodes the animation as APNG (animated PNG, lossless and with full alpha). Viewers without APNG support show
+     * the first frame. Each frame is stored as the area that changed since the frame before, identical frames are
+     * merged (unless the `optimize` option is false): the file shows exactly the same animation, but doesn't
+     * necessarily decode to the same frames
      * @param compression The zlib compression level (0-9), higher is smaller but slower
      */
     encodeAPNG(compression?: number): Promise<Uint8Array>;
     /**
-     * Encodes the animation as lossless animated WebP
+     * Encodes the animation as lossless animated WebP. Each frame is stored as the area that changed since the frame
+     * before, identical frames are merged (unless the `optimize` option is false): the file shows exactly the same
+     * animation, but doesn't necessarily decode to the same frames
+     * @param options See {@link AnimationEncodeOptions}
+     */
+    encodeWebP({ metadata, optimize }?: AnimationEncodeOptions): Promise<Uint8Array>;
+    /**
+     * Decodes an animated GIF, APNG or WebP into fully composited frames (still images become a single frame)
+     * @param input The binary data to decode
+     * @param options See {@link AnimationDecodeOptions}
      */
-    encodeWebP(): Promise<Uint8Array>;
+    static decode(input: BinaryData, options?: AnimationDecodeOptions): Promise<Animation>;
     /**
      * Decodes an animated GIF, APNG or WebP into fully composited frames (still images become a single frame)
      * @param input The binary data to decode

package/dist/animation.js

@@ -5,19 +5,23 @@ import { view } from "./util/mem.js";
 import { Image } from "./image.js";
 import { Frame } from "./frame.js";
 import { ImageType } from "./image-type.js";
+import { optimize } from "./util/optimize.js";
+import { resolveMetadata, pngText, exifData, gifComments } from "./metadata.js";
+import { isOptions } from "./util/options.js";
 const toPlays = (loopCount) => loopCount < 0 ? 0 : loopCount + 1;
 const fromPlays = (plays) => plays === 0 ? -1 : plays - 1;
 function canvasFrames(width, height, frames) {
     return frames.map(({ pixels, duration }) => {
         const frame = new Frame(width, height, duration, 0, 0, Frame.DISPOSAL_BACKGROUND);
-        frame.bitmap.set(pixels);
+        frame.bitmap = pixels;
         return frame;
     });
 }
 export class Animation extends Array {
     loopCount;
-    constructor(frames, loopCount = -1) {
+    constructor(frames, loopCountOrOptions = -1) {
         super();
+        const { loopCount = -1 } = isOptions(loopCountOrOptions) ? loopCountOrOptions : { loopCount: loopCountOrOptions };
         for (const frame of frames)
             this.push(frame);
         for (let i = 0; i < this.length; i++)
@@ -30,6 +34,19 @@ export class Animation extends Array {
     static get [Symbol.species]() {
         return Array;
     }
+    get frames() {
+        return this;
+    }
+    set frames(frames) {
+        frames = Array.from(frames);
+        frames.forEach((frame, i) => {
+            if (!(frame instanceof Frame))
+                throw new TypeError(`Frame ${i} is not an instance of Frame`);
+        });
+        this.length = 0;
+        for (const frame of frames)
+            this.push(frame);
+    }
     get width() {
         let max = 0;
         for (const frame of this)
@@ -55,7 +72,8 @@ export class Animation extends Array {
         const Class = this.constructor;
         return new Class(Array.prototype.slice.call(this, start, end), this.loopCount);
     }
-    resize(width, height, mode = Image.RESIZE_BILINEAR) {
+    resize(width, height, modeOrOptions) {
+        const mode = (isOptions(modeOrOptions) ? modeOrOptions.mode : modeOrOptions) ?? Image.RESIZE_BILINEAR;
         const originalWidth = this.width, originalHeight = this.height;
         if (width === Image.RESIZE_AUTO && height === Image.RESIZE_AUTO)
             throw new Error('RESIZE_AUTO can only be used for either width or height, not for both');
@@ -78,38 +96,47 @@ export class Animation extends Array {
             if (!(frame instanceof Frame))
                 throw new Error('Animation contains invalid frames');
     }
-    async encodeGIF(quality = 95) {
+    async encodeGIF(qualityOrOptions = 95) {
+        const { quality = 95, metadata = {}, optimize = true } = isOptions(qualityOrOptions) ? qualityOrOptions : { quality: qualityOrOptions };
         this.__validate__();
-        const frames = [];
-        for (const frame of this)
-            frames.push({
+        const frames = optimize
+            ? this.__optimized__({ replace: false, even: false, alpha: 'frame', palette: 256, cover: true }).map(f => ({ ...f, dispose: f.dispose ? 3 : 1 }))
+            : Array.from(this, frame => ({
                 x: frame.xOffset,
                 y: frame.yOffset,
                 width: frame.width,
                 height: frame.height,
-                delay: Math.round(frame.duration / 10),
+                duration: frame.duration,
                 dispose: frame.__disposal_id__,
                 pixels: new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength)
-            });
-        return gifCodec.encode({ width: this.width, height: this.height, loopCount: this.loopCount, frames }, quality);
+            }));
+        const gifFrames = frames.map(({ duration, ...f }) => ({ ...f, delay: Math.round(duration / 10) }));
+        return gifCodec.encode({ width: this.width, height: this.height, loopCount: this.loopCount, frames: gifFrames }, quality, gifComments(resolveMetadata(metadata)));
     }
-    async encodeAPNG(compression = 1) {
+    async encodeAPNG(compressionOrOptions = 1) {
+        const { compression = 1, metadata = {}, optimize = true } = isOptions(compressionOrOptions) ? compressionOrOptions : { compression: compressionOrOptions };
         this.__validate__();
         if (!this.length)
             throw new Error('An animation needs at least one frame');
-        return png.encodeAnimation(this.__apngFrames__(), this.width, this.height, toPlays(this.loopCount), compression);
+        const frames = optimize
+            ? this.__optimized__({ replace: true, even: false, alpha: frames => png.alphaCost(frames.map(f => f.pixels)) }).map(f => ({ ...f, dispose: f.dispose ? 1 : 0 }))
+            : this.__apngFrames__().map(({ blend: _, ...f }) => f);
+        return png.encodeAnimation(frames, this.width, this.height, toPlays(this.loopCount), compression, pngText(resolveMetadata(metadata)));
     }
-    async encodeWebP() {
+    async encodeWebP({ metadata = {}, optimize = true } = {}) {
         this.__validate__();
         if (!this.length)
             throw new Error('An animation needs at least one frame');
+        const frames = optimize ? this.__optimized__({ replace: true, even: true, alpha: 'frame' }) : this.__webpFrames__();
+        return webp.encodeAnimation(frames, this.width, this.height, toPlays(this.loopCount), exifData(resolveMetadata(metadata)));
+    }
+    __webpFrames__() {
         const width = this.width, height = this.height;
         const fullFrames = this.some(f => f.disposalMode === 'previous' || (f.disposalMode === 'background' && (f.xOffset & 1 || f.yOffset & 1)));
-        if (fullFrames) {
-            const canvases = png.compositeAnimation({ width, height, frames: this.__apngFrames__() });
-            return webp.encodeAnimation(canvases.map(c => ({ x: 0, y: 0, width, height, duration: c.duration, dispose: true, pixels: c.pixels })), width, height, toPlays(this.loopCount));
-        }
-        const frames = Array.from(this, frame => {
+        if (fullFrames)
+            return png.compositeAnimation({ width, height, frames: this.__apngFrames__() })
+                .map(c => ({ x: 0, y: 0, width, height, duration: c.duration, dispose: true, pixels: c.pixels }));
+        return Array.from(this, frame => {
             let { xOffset: x, yOffset: y, width: w, height: h } = frame;
             let pixels = new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength);
             if (x & 1 || y & 1) {
@@ -125,7 +152,9 @@ export class Animation extends Array {
             }
             return { x, y, width: w, height: h, duration: frame.duration, dispose: frame.disposalMode === 'background', pixels };
         });
-        return webp.encodeAnimation(frames, width, height, toPlays(this.loopCount));
+    }
+    __optimized__(options) {
+        return optimize(this.__apngFrames__(), this.width, this.height, options);
     }
     __apngFrames__() {
         const dispose = [0, 0, 2, 1];
@@ -140,7 +169,8 @@ export class Animation extends Array {
             pixels: new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength)
         }));
     }
-    static async decode(input, onlyExtractFirstFrame = false) {
+    static async decode(input, onlyFirstFrameOrOptions = false) {
+        const onlyExtractFirstFrame = isOptions(onlyFirstFrameOrOptions) ? onlyFirstFrameOrOptions.onlyFirstFrame ?? false : onlyFirstFrameOrOptions;
         const data = view(input);
         const type = ImageType.getType(data);
         if (type === 'gif')

package/dist/codecs/exif.js

@@ -1,3 +1,5 @@
+import { concat } from "../util/mem.js";
+import { encode as utf8 } from "../util/utf8.js";
 export function orientation(data) {
     if (data.length >= 6 && data[0] === 0x45 && data[1] === 0x78 && data[2] === 0x69 && data[3] === 0x66 && data[4] === 0 && data[5] === 0)
         data = data.subarray(6);
@@ -25,3 +27,63 @@ export function xmpOrientation(xmp) {
     const match = /tiff:Orientation\s*(?:=\s*["']|>\s*)([1-8])\b/.exec(xmp);
     return match ? +match[1] : 1;
 }
+const ASCII = 2, LONG = 4, UNDEFINED = 7;
+const ascii = (tag, text) => {
+    const data = concat([utf8(text), [0]]);
+    return { tag, type: ASCII, count: data.length, data };
+};
+const pad = (n) => String(n).padStart(2, '0');
+export function encode(fields) {
+    const ifd0 = [];
+    const exifIFD = [];
+    if (fields.description)
+        ifd0.push(ascii(0x010e, fields.description));
+    if (fields.software)
+        ifd0.push(ascii(0x0131, fields.software));
+    if (fields.dateTime) {
+        const d = fields.dateTime;
+        const time = `${d.getUTCFullYear()}:${pad(d.getUTCMonth() + 1)}:${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+        ifd0.push(ascii(0x0132, time));
+        exifIFD.push({ tag: 0x9000, type: UNDEFINED, count: 4, data: Uint8Array.of(0x30, 0x32, 0x33, 0x32) });
+        exifIFD.push(ascii(0x9003, time));
+        exifIFD.push(ascii(0x9010, '+00:00'));
+        exifIFD.push(ascii(0x9011, '+00:00'));
+    }
+    if (fields.artist)
+        ifd0.push(ascii(0x013b, fields.artist));
+    if (fields.copyright)
+        ifd0.push(ascii(0x8298, fields.copyright));
+    if (exifIFD.length)
+        ifd0.push({ tag: 0x8769, type: LONG, count: 1, data: new Uint8Array(4) });
+    const size = (entries) => 2 + entries.length * 12 + 4 + entries.reduce((n, e) => n + (e.data.length > 4 ? e.data.length + (e.data.length & 1) : 0), 0);
+    const ifd0Offset = 8;
+    const exifOffset = ifd0Offset + size(ifd0);
+    const out = new Uint8Array(exifOffset + (exifIFD.length ? size(exifIFD) : 0));
+    const view = new DataView(out.buffer);
+    out.set([0x4d, 0x4d, 0x00, 0x2a]);
+    view.setUint32(4, ifd0Offset);
+    const pointer = ifd0.find(e => e.tag === 0x8769);
+    if (pointer)
+        new DataView(pointer.data.buffer).setUint32(0, exifOffset);
+    const write = (entries, offset) => {
+        view.setUint16(offset, entries.length);
+        let data = offset + 2 + entries.length * 12 + 4;
+        entries.forEach((e, i) => {
+            const at = offset + 2 + i * 12;
+            view.setUint16(at, e.tag);
+            view.setUint16(at + 2, e.type);
+            view.setUint32(at + 4, e.count);
+            if (e.data.length <= 4)
+                out.set(e.data, at + 8);
+            else {
+                view.setUint32(at + 8, data);
+                out.set(e.data, data);
+                data += e.data.length + (e.data.length & 1);
+            }
+        });
+    };
+    write(ifd0, ifd0Offset);
+    if (exifIFD.length)
+        write(exifIFD, exifOffset);
+    return out;
+}

package/dist/codecs/gif.js

@@ -3,7 +3,7 @@ const DISPOSAL_TO_GIF = [0, 1, 3, 2];
 const DISPOSAL_FROM_GIF = [0, 1, 3, 2, 0, 0, 0, 0];
 const MAX_CODE = 4095;
 const UNEXPECTED_END = new Error('GIF: unexpected end of data');
-export function encode({ width, height, loopCount = -1, frames }, quality = 95) {
+export function encode({ width, height, loopCount = -1, frames }, quality = 95, comments = []) {
     const out = new ByteWriter();
     out.bytes(0x47, 0x49, 0x46, 0x38, 0x39, 0x61);
     out.u16(width);
@@ -16,8 +16,14 @@ export function encode({ width, height, loopCount = -1, frames }, quality = 95)
         out.u16(loopCount === -1 ? 0 : loopCount);
         out.bytes(0x00);
     }
-    for (const frame of frames) {
-        const { palette, indices, transparentIndex } = quantize(frame.pixels, frame.width, { quality });
+    for (const comment of comments) {
+        out.bytes(0x21, 0xfe);
+        writeSubBlocks(out, comment);
+    }
+    const restores = frames.some(frame => frame.dispose === 3);
+    for (const [i, frame] of frames.entries()) {
+        const transparent = frame.dispose === 3 || (i === 0 && restores);
+        const { palette, indices, transparentIndex } = quantize(frame.pixels, frame.width, { quality, transparent });
         const entries = palette.length / 3;
         const bits = Math.max(1, Math.ceil(Math.log2(entries)));
         out.bytes(0x21, 0xf9, 0x04);
@@ -182,24 +188,20 @@ export function decode(data, onlyFirstFrame = false) {
             control = null;
             if (!fw || !fh)
                 continue;
-            const pixels = new Uint8Array(fw * fh * 4);
-            const rows = interlaced ? interlacedRows(fh) : null;
-            for (let row = 0; row < fh; row++) {
-                const targetRow = rows ? rows[row] : row;
-                for (let column = 0; column < fw; column++) {
-                    const index = indices[row * fw + column];
-                    if (index === transparentIndex)
-                        continue;
-                    const o = (targetRow * fw + column) * 4;
-                    if (table && index * 3 + 2 < table.length) {
-                        pixels[o] = table[index * 3];
-                        pixels[o + 1] = table[index * 3 + 1];
-                        pixels[o + 2] = table[index * 3 + 2];
-                    }
-                    pixels[o + 3] = 0xff;
-                }
+            const colors = new Uint32Array(256), bytes = new Uint8Array(colors.buffer);
+            for (let index = 0; index < 256; index++) {
+                if (table && index * 3 + 2 < table.length)
+                    bytes.set(table.subarray(index * 3, index * 3 + 3), index * 4);
+                bytes[index * 4 + 3] = 0xff;
+            }
+            let ordered = indices;
+            if (interlaced) {
+                const rows = interlacedRows(fh);
+                ordered = new Uint8Array(indices.length);
+                for (let row = 0; row < fh; row++)
+                    ordered.set(indices.subarray(row * fw, (row + 1) * fw), rows[row] * fw);
             }
-            frames.push({ x, y, width: fw, height: fh, delay, dispose, pixels });
+            frames.push({ x, y, width: fw, height: fh, delay, dispose, indices: ordered, colors, transparentIndex });
             if (onlyFirstFrame)
                 break;
         }
@@ -210,15 +212,21 @@ export function composite({ width, height, frames }) {
     const output = [];
     for (const frame of frames) {
         const previous = frame.dispose === 2 ? canvas.slice() : null;
-        const src = new Uint32Array(frame.pixels.buffer, frame.pixels.byteOffset, frame.width * frame.height);
+        const { indices, colors, transparentIndex } = frame;
         const x0 = Math.min(frame.x, width), x1 = Math.min(frame.x + frame.width, width);
         const y0 = Math.min(frame.y, height), y1 = Math.min(frame.y + frame.height, height);
         for (let y = y0; y < y1; y++) {
             const srcRow = (y - frame.y) * frame.width - frame.x;
             const dstRow = y * width;
-            for (let x = x0; x < x1; x++)
-                if (frame.pixels[(srcRow + x) * 4 + 3] !== 0)
-                    canvas[dstRow + x] = src[srcRow + x];
+            if (transparentIndex < 0)
+                for (let x = x0; x < x1; x++)
+                    canvas[dstRow + x] = colors[indices[srcRow + x]];
+            else
+                for (let x = x0; x < x1; x++) {
+                    const index = indices[srcRow + x];
+                    if (index !== transparentIndex)
+                        canvas[dstRow + x] = colors[index];
+                }
         }
         output.push({ pixels: new Uint8Array(canvas.slice().buffer), delay: frame.delay });
         if (frame.dispose === 3) {
@@ -287,10 +295,18 @@ function lzwDecode(data, minCodeSize, pixelCount) {
         const length = lengths[entry];
         const end = Math.min(out + length, pixelCount);
         let c = entry;
-        for (let i = out + length - 1; i >= out; i--) {
-            if (i < end)
+        if (end === out + length) {
+            for (let i = end - 1; i >= out; i--) {
                 output[i] = suffix[c];
-            c = prefix[c];
+                c = prefix[c];
+            }
+        }
+        else {
+            for (let i = out + length - 1; i >= out; i--) {
+                if (i < end)
+                    output[i] = suffix[c];
+                c = prefix[c];
+            }
         }
         let written = end - out;
         if (code === next) {

package/dist/codecs/jpeg.js

@@ -5,6 +5,7 @@
  * (Copyright 2014 Mozilla Foundation, Apache License 2.0). See THIRD_PARTY_NOTICES.md
  */
 import { orientation as exifOrientation } from "./exif.js";
+import { concat } from "../util/mem.js";
 const ZIGZAG = Int32Array.of(0, 1, 8, 16, 9, 2, 3, 10, 17, 24, 32, 25, 18, 11, 4, 5, 12, 19, 26, 33, 40, 48, 41, 34, 27, 20, 13, 6, 7, 14, 21, 28, 35, 42, 49, 56, 57, 50, 43, 36, 29, 22, 15, 23, 30, 37, 44, 51, 58, 59, 52, 45, 38, 31, 39, 46, 53, 60, 61, 54, 47, 55, 62, 63);
 function clamp8(v) {
     return v < 0 ? 0 : v > 255 ? 255 : v;
@@ -684,7 +685,7 @@ const CHROMA_QUANTIZATION = [
     99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99
 ];
 const AAN_SCALE = [1, 1.387039845, 1.306562965, 1.175875602, 1, 0.785694958, 0.5411961, 0.275899379];
-export function encode(pixels, width, height, quality = 90) {
+export function encode(pixels, width, height, quality = 90, { exif, comment } = {}) {
     if (!width || !height || width > 0xffff || height > 0xffff)
         throw new RangeError('JPEG: invalid dimensions');
     quality = Math.min(100, Math.max(1, Math.round(quality)));
@@ -769,6 +770,17 @@ export function encode(pixels, width, height, quality = 90) {
     const writer = new BitWriter(width * height);
     writer.bytes(0xff, 0xd8);
     writer.bytes(0xff, 0xe0, 0x00, 0x10, 0x4a, 0x46, 0x49, 0x46, 0x00, 0x01, 0x01, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00);
+    const segment = (marker, body) => {
+        if (body.length > 65533)
+            throw new RangeError('JPEG: metadata too large');
+        writer.bytes(0xff, marker, body.length + 2 >> 8, body.length + 2 & 255);
+        for (let i = 0; i < body.length; i++)
+            writer.bytes(body[i]);
+    };
+    if (exif)
+        segment(0xe1, concat([[0x45, 0x78, 0x69, 0x66, 0, 0], exif]));
+    if (comment)
+        segment(0xfe, comment);
     writer.bytes(0xff, 0xdb, 0x00, 0x84);
     for (let t = 0; t < 2; t++) {
         writer.bytes(t);