imagescript 3.0.0 → 3.2.0

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 120 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
@@ -25,26 +25,36 @@ deno add jsr:@matmen/imagescript     # Deno (npm:imagescript works too)
   - PNGs (grayscale, RGB, indexed colors, 1-16 bit, interlaced) with and without alpha channels
   - JPEGs (baseline and progressive; grayscale, RGB, CMYK)
   - TIFFs (strips and tiles; uncompressed, LZW, deflate, PackBits and JPEG compressed; BigTIFF)
-  - JPEGs, TIFFs and PNGs are rotated as their Exif (or, for PNGs, XMP) orientation says
-- [Decoding GIFs](https://imagescript.matmen.dev/classes/GIF.html#decode) with all frames, durations and disposal modes
+  - WebPs (lossy, lossless and with alpha; bit-exact with libwebp)
+  - TGAs (color mapped, truecolor and greyscale; uncompressed and run length encoded)
+  - JPEGs, TIFFs, PNGs and WebPs are rotated as their Exif (or, for PNGs, XMP) orientation says
+- [Decoding animations](https://imagescript.matmen.dev/classes/Animation.html#decode) (GIF, APNG and WebP) with all
+  frames, durations and disposal modes
 - [Rendering SVGs](https://imagescript.matmen.dev/classes/Image.html#rendersvg) (shapes, paths, gradients, strokes, clip paths,
   masks, CSS; no text, images or filters)
-- [Rendering vector fonts](https://imagescript.matmen.dev/classes/Image.html#rendertext) (TrueType and OpenType, with kerning and outlines)
+- [Rendering vector fonts](https://imagescript.matmen.dev/classes/Image.html#rendertext) (TrueType and OpenType, with kerning,
+  outlines and TrueType hinting)
 - [Resizing](https://imagescript.matmen.dev/classes/Image.html#resize) (bilinear, bicubic, area averaging and nearest neighbor)
 - 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)
   , [hueShift](https://imagescript.matmen.dev/classes/Image.html#hueshift), ...)
-- Compositing with opacity and blend modes ([composite](https://imagescript.matmen.dev/classes/Image.html#composite))
+- Compositing with opacity and blend modes ([composite](https://imagescript.matmen.dev/classes/Image.html#composite)),
+  removing backgrounds ([colorToAlpha](https://imagescript.matmen.dev/classes/Image.html#colortoalpha))
 - Color information functions ([averageColor](https://imagescript.matmen.dev/classes/Image.html#averagecolor)
   , [dominantColor](https://imagescript.matmen.dev/classes/Image.html#dominantcolor), ...)
 - Encoding images as [PNGs](https://imagescript.matmen.dev/classes/Image.html#encode) (smallest lossless color type)
   , [JPEGs](https://imagescript.matmen.dev/classes/Image.html#encodejpeg)
-  and animated [GIFs](https://imagescript.matmen.dev/classes/GIF.html#encode)
+  , lossless [WebPs](https://imagescript.matmen.dev/classes/Image.html#encodewebp)
+  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), storing only what changes from frame to frame
 
 ---
 
@@ -68,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.
 
@@ -76,13 +86,23 @@ 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
 [Fast CRC32 in JavaScript](https://gist.github.com/101arrowz/e58695f7ccfdf74f60ba22018093edea), both by Arjun Barrett.
 The JPEG codec is based in part on the work of the Independent JPEG Group (libjpeg) and on
 [pdf.js](https://github.com/mozilla/pdf.js), the glyph rasterizer is translated from
-[font-rs](https://github.com/raphlinus/font-rs). See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) for their licenses.
+[font-rs](https://github.com/raphlinus/font-rs). The WebP codecs follow [RFC 9649](https://www.rfc-editor.org/rfc/rfc9649) and [RFC 6386](https://www.rfc-editor.org/rfc/rfc6386)
+and reproduce [libwebp](https://chromium.googlesource.com/webm/libwebp)'s color conversion, the TrueType hinting follows
+[FreeType](https://freetype.org)'s interpreter (portions of this software are copyright © 2026 The FreeType Project).
+See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) for their licenses.
 
 ---
 

package/THIRD_PARTY_NOTICES.md

@@ -10,6 +10,10 @@ following projects, under their own licenses. Each derived file says so in its h
 | [libjpeg](https://ijg.org/) / [libjpeg-turbo](https://libjpeg-turbo.org/) by the Independent JPEG Group | `src/codecs/jpeg.ts` (IDCT, FDCT, upsampling, color conversion, progressive refinement, optimal Huffman tables) | IJG |
 | [pdf.js](https://github.com/mozilla/pdf.js) (forked from [jpgjs](https://github.com/notmasteryet/jpgjs) by notmasteryet) | `src/codecs/jpeg.ts` (structure of the scan decoder) | Apache-2.0 |
 | [font-rs](https://github.com/raphlinus/font-rs) by Raph Levien | `src/render/text.ts` (the `Rasterizer` class, also used for SVGs) | Apache-2.0 |
+| [RFC 9649](https://www.rfc-editor.org/rfc/rfc9649) (WebP Image Format) | `src/codecs/vp8l.ts` (lossless bitstream, short distance code table), `src/codecs/webp.ts` (container) | BSD-3-Clause (Revised BSD) |
+| [RFC 6386](https://www.rfc-editor.org/rfc/rfc6386) (VP8 Data Format and Decoding Guide, with the libvpx reference decoder) | `src/codecs/vp8-tables.ts` (probability and quantizer tables), `src/codecs/vp8.ts` (decoding procedures) | BSD-3-Clause |
+| [libwebp](https://chromium.googlesource.com/webm/libwebp) | `src/codecs/vp8.ts` (YUV to RGB conversion, "fancy" chroma upsampling), `src/codecs/webp.ts` (animation frame blending) | BSD-3-Clause |
+| [FreeType](https://freetype.org) | `src/render/hinting.ts` (behavior and parts of the logic of the TrueType interpreter) | FreeType License |
 
 ## fflate, Fast CRC32 in JavaScript
 
@@ -72,3 +76,81 @@ The scan decoder of `src/codecs/jpeg.ts` follows the structure of pdf.js' `src/c
 one decode function per scan type). The `Rasterizer` class in `src/render/text.ts` is a translation of font-rs'
 `Raster` from Rust to TypeScript (`draw_line`, `draw_quad`, `accumulate`); its `cubic` method is adapted from
 `draw_quad`. The full license text is in [licenses/Apache-2.0.txt](licenses/Apache-2.0.txt).
+
+## RFC 6386, libwebp
+
+The VP8 decoder follows the procedures of RFC 6386 and its reference decoder, its constant tables are extracted from
+the RFC. To decode exactly like libwebp, the YUV to RGB conversion, the chroma upsampling and the blending of animation
+frames reproduce libwebp's integer arithmetic.
+
+```
+RFC 6386 reference decoder: Copyright (c) 2010, 2011, Google Inc. All rights reserved.
+libwebp: Copyright (c) 2010, Google Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in
+    the documentation and/or other materials provided with the
+    distribution.
+
+  * Neither the name of Google nor the names of its contributors may
+    be used to endorse or promote products derived from this software
+    without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+```
+
+The RFC's reference decoder additionally comes with Google's patent grant for VP8 (RFC 6386 section 20.27).
+
+## RFC 9649
+
+The WebP container and the lossless (VP8L) codec follow RFC 9649, the short distance code table is taken from it.
+
+```
+Copyright (c) 2024 IETF Trust and the persons identified as authors of the code. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+following conditions are met:
+
+- Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+  disclaimer.
+- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+  following disclaimer in the documentation and/or other materials provided with the distribution.
+- Neither the name of Internet Society, IETF or IETF Trust, nor the names of specific contributors, may be used to
+  endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+```
+
+## FreeType
+
+Portions of this software are copyright © 2026 The FreeType Project (https://freetype.org). All rights reserved.
+
+The TrueType hinting interpreter in `src/render/hinting.ts` is written after the TrueType instruction specification.
+Where the specification leaves details open, its behavior and parts of its logic follow FreeType's interpreter
+(`src/truetype/ttinterp.c`): the fixed point rounding, measuring original distances on the unscaled outline, the
+interpolation of untouched points (IUP), the handling of near-perpendicular freedom and projection vectors, and the
+tolerance of invalid references. FreeType is used under the FreeType License, included as
+[licenses/FTL.txt](licenses/FTL.txt).

package/dist/animation.d.ts

@@ -0,0 +1,140 @@
+import { BinaryData } from './util/mem.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: 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 */
+    get height(): number;
+    /** The animation's duration (in ms) */
+    get duration(): number;
+    toString(): string;
+    /**
+     * 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. 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. 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. 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}
+     */
+    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
+     * @param onlyExtractFirstFrame Whether to stop decoding after the first frame
+     */
+    static decode(input: BinaryData, onlyExtractFirstFrame?: boolean): Promise<Animation>;
+}

package/dist/animation.js

@@ -0,0 +1,197 @@
+import * as gifCodec from "./codecs/gif.js";
+import * as png from "./codecs/png.js";
+import * as webp from "./codecs/webp.js";
+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);
+        return frame;
+    });
+}
+export class Animation extends Array {
+    loopCount;
+    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++)
+            if (!(this[i] instanceof Frame))
+                throw new TypeError(`Frame ${i} is not an instance of Frame`);
+        if (loopCount < -1 || isNaN(loopCount))
+            throw new RangeError('Invalid loop count');
+        this.loopCount = loopCount;
+    }
+    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)
+            max = Math.max(max, frame.width + frame.xOffset);
+        return max;
+    }
+    get height() {
+        let max = 0;
+        for (const frame of this)
+            max = Math.max(max, frame.height + frame.yOffset);
+        return max;
+    }
+    get duration() {
+        let duration = 0;
+        for (const frame of this)
+            duration += frame.duration;
+        return duration;
+    }
+    toString() {
+        return `Animation<${this.width}x${this.height}x${this.duration}ms>`;
+    }
+    slice(start, end) {
+        const Class = this.constructor;
+        return new Class(Array.prototype.slice.call(this, start, end), this.loopCount);
+    }
+    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');
+        if (width === Image.RESIZE_AUTO)
+            width = originalWidth / originalHeight * height;
+        if (height === Image.RESIZE_AUTO)
+            height = originalHeight / originalWidth * width;
+        const sx = width / originalWidth, sy = height / originalHeight;
+        for (const frame of this) {
+            const left = Math.round(frame.xOffset * sx), top = Math.round(frame.yOffset * sy);
+            const right = Math.round((frame.xOffset + frame.width) * sx), bottom = Math.round((frame.yOffset + frame.height) * sy);
+            Image.prototype.resize.call(frame, Math.max(1, right - left), Math.max(1, bottom - top), mode);
+            frame.xOffset = left;
+            frame.yOffset = top;
+        }
+        return this;
+    }
+    __validate__() {
+        for (const frame of this)
+            if (!(frame instanceof Frame))
+                throw new Error('Animation contains invalid frames');
+    }
+    async encodeGIF(qualityOrOptions = 95) {
+        const { quality = 95, metadata = {}, optimize = true } = isOptions(qualityOrOptions) ? qualityOrOptions : { quality: qualityOrOptions };
+        this.__validate__();
+        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,
+                duration: frame.duration,
+                dispose: frame.__disposal_id__,
+                pixels: new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength)
+            }));
+        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(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');
+        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({ 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)
+            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) {
+                const dx = x & 1, dy = y & 1;
+                const padded = new Uint8Array((w + dx) * (h + dy) * 4);
+                for (let row = 0; row < h; row++)
+                    padded.set(pixels.subarray(row * w * 4, (row + 1) * w * 4), ((row + dy) * (w + dx) + dx) * 4);
+                pixels = padded;
+                x -= dx;
+                y -= dy;
+                w += dx;
+                h += dy;
+            }
+            return { x, y, width: w, height: h, duration: frame.duration, dispose: frame.disposalMode === 'background', pixels };
+        });
+    }
+    __optimized__(options) {
+        return optimize(this.__apngFrames__(), this.width, this.height, options);
+    }
+    __apngFrames__() {
+        const dispose = [0, 0, 2, 1];
+        return Array.from(this, frame => ({
+            x: frame.xOffset,
+            y: frame.yOffset,
+            width: frame.width,
+            height: frame.height,
+            duration: frame.duration,
+            dispose: dispose[frame.__disposal_id__],
+            blend: 1,
+            pixels: new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength)
+        }));
+    }
+    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')
+            return Animation.__fromGIF__(data, onlyExtractFirstFrame, Animation);
+        if (type === 'webp') {
+            const decoded = webp.decodeAnimation(data, onlyExtractFirstFrame);
+            const frames = canvasFrames(decoded.width, decoded.height, webp.composite(decoded));
+            return new Animation(frames, fromPlays(decoded.loopCount));
+        }
+        if (type === 'png') {
+            const decoded = await png.decodeAnimation(data, onlyExtractFirstFrame);
+            const frames = canvasFrames(decoded.width, decoded.height, png.compositeAnimation(decoded));
+            return new Animation(frames, decoded.frames.length > 1 ? fromPlays(decoded.plays) : -1);
+        }
+        if (type)
+            return new Animation([Frame.from(await Image.decode(data), 0)]);
+        throw new Error('Unsupported image type');
+    }
+    static __fromGIF__(data, onlyExtractFirstFrame, Class) {
+        const decoded = gifCodec.decode(data, onlyExtractFirstFrame);
+        const frames = gifCodec.composite(decoded).map(({ pixels, delay }) => ({ pixels, duration: 10 * delay }));
+        return new Class(canvasFrames(decoded.width, decoded.height, frames), decoded.loopCount);
+    }
+}

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;
+}