imagescript 3.0.0 → 3.1.0

package/dist/codecs/webp.d.ts

@@ -0,0 +1,67 @@
+export interface WebPFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** milliseconds */
+    duration: number;
+    /** whether the frame is alpha blended onto the canvas (false: it replaces the covered area) */
+    blend: boolean;
+    /** whether the frame's area is cleared to transparent after it was shown */
+    dispose: boolean;
+    /** RGBA */
+    pixels: Uint8Array;
+}
+export interface WebPAnimation {
+    width: number;
+    height: number;
+    /** 0 = forever */
+    loopCount: number;
+    /** ARGB background color hint (decoders, like browsers, are free to ignore it) */
+    background: number;
+    frames: WebPFrame[];
+}
+/** Whether the WebP is animated */
+export declare function isAnimated(data: Uint8Array): boolean;
+/**
+ * Decodes a still WebP into RGBA pixels. Animated WebPs decode to their first frame composited on the canvas
+ */
+export declare function decode(data: Uint8Array): {
+    width: number;
+    height: number;
+    pixels: Uint8Array;
+    orientation: number;
+};
+/**
+ * Decodes an animated WebP into its frames (not composited); still WebPs become a single frame
+ */
+export declare function decodeAnimation(data: Uint8Array, onlyFirstFrame?: boolean): WebPAnimation;
+/**
+ * Composites animation frames onto the canvas like browsers do (transparent background, the background color hint
+ * is ignored as the spec allows)
+ */
+export declare function composite({ width, height, frames }: WebPAnimation): Array<{
+    pixels: Uint8Array;
+    duration: number;
+}>;
+/**
+ * Encodes RGBA pixels into a lossless WebP
+ */
+export declare function encode(rgba: Uint8Array, width: number, height: number): Uint8Array;
+export interface WebPEncodeFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** milliseconds */
+    duration: number;
+    /** whether the frame's area is cleared after it was shown */
+    dispose: boolean;
+    /** RGBA, alpha blended onto the canvas */
+    pixels: Uint8Array;
+}
+/**
+ * Encodes frames into a lossless animated WebP. Frame offsets have to be even (the format stores them halved)
+ * @param plays How often to play the animation, 0 = forever
+ */
+export declare function encodeAnimation(frames: WebPEncodeFrame[], width: number, height: number, plays: number): Uint8Array;

package/dist/codecs/webp.js

@@ -0,0 +1,280 @@
+/*!
+ * WebP container. Animation frames are blended with libwebp's integer arithmetic (Copyright (c) 2010 Google Inc., BSD
+ * license, see THIRD_PARTY_NOTICES.md)
+ */
+import * as vp8l from "./vp8l.js";
+import * as vp8 from "./vp8.js";
+import { orientation as exifOrientation } from "./exif.js";
+const fourCC = (s) => s.charCodeAt(0) | s.charCodeAt(1) << 8 | s.charCodeAt(2) << 16 | s.charCodeAt(3) << 24;
+const RIFF = fourCC('RIFF'), WEBP = fourCC('WEBP');
+const VP8 = fourCC('VP8 '), VP8L = fourCC('VP8L'), VP8X = fourCC('VP8X');
+const ALPH = fourCC('ALPH'), ANIM = fourCC('ANIM'), ANMF = fourCC('ANMF'), EXIF = fourCC('EXIF');
+function chunks(data, start, end) {
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    const out = [];
+    let offset = start;
+    while (offset + 8 <= end) {
+        const type = view.getUint32(offset, true);
+        const size = view.getUint32(offset + 4, true);
+        const dataStart = offset + 8;
+        out.push({ type, data: data.subarray(dataStart, Math.min(end, dataStart + size)) });
+        offset = dataStart + size + (size & 1);
+    }
+    return out;
+}
+function container(data) {
+    if (data.length < 12)
+        throw new Error('WebP: invalid header');
+    const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+    if (view.getUint32(0, true) !== RIFF || view.getUint32(8, true) !== WEBP)
+        throw new Error('WebP: invalid header');
+    const size = view.getUint32(4, true);
+    return chunks(data, 12, Math.min(data.length, 8 + size));
+}
+const u24 = (d, o) => d[o] | d[o + 1] << 8 | d[o + 2] << 16;
+function decodeBitstream(list) {
+    let alpha = null;
+    for (const chunk of list) {
+        if (chunk.type === ALPH)
+            alpha ??= chunk;
+        else if (chunk.type === VP8L) {
+            const { width, height, argb } = vp8l.decode(chunk.data);
+            const pixels = new Uint8Array(width * height * 4);
+            const out = new DataView(pixels.buffer);
+            for (let i = 0; i < argb.length; i++) {
+                const p = argb[i];
+                out.setUint32(i * 4, (p << 8 | p >>> 24) >>> 0);
+            }
+            return { width, height, pixels };
+        }
+        else if (chunk.type === VP8) {
+            const image = vp8.decode(chunk.data);
+            if (alpha)
+                applyAlpha(image.pixels, image.width, image.height, alpha.data);
+            return image;
+        }
+    }
+    throw new Error('WebP: no image data');
+}
+function applyAlpha(rgba, width, height, chunk) {
+    if (!chunk.length)
+        return;
+    const header = chunk[0];
+    const compression = header & 3, filter = header >> 2 & 3;
+    const total = width * height;
+    let alpha;
+    if (compression === 0) {
+        alpha = new Uint8Array(total);
+        alpha.set(chunk.subarray(1, 1 + total));
+    }
+    else if (compression === 1) {
+        const argb = vp8l.decodeStream(new vp8l.BitReader(chunk, 1), width, height);
+        alpha = new Uint8Array(total);
+        for (let i = 0; i < total; i++)
+            alpha[i] = argb[i] >> 8 & 255;
+    }
+    else
+        throw new Error('WebP: invalid alpha compression');
+    if (filter)
+        unfilterAlpha(alpha, width, height, filter);
+    for (let i = 0; i < total; i++)
+        rgba[i * 4 + 3] = alpha[i];
+}
+function unfilterAlpha(a, width, height, filter) {
+    for (let y = 0; y < height; y++) {
+        const row = y * width;
+        for (let x = 0; x < width; x++) {
+            const i = row + x;
+            let prediction;
+            if (x === 0 && y === 0)
+                prediction = 0;
+            else if (y === 0)
+                prediction = a[i - 1];
+            else if (x === 0)
+                prediction = a[i - width];
+            else if (filter === 1)
+                prediction = a[i - 1];
+            else if (filter === 2)
+                prediction = a[i - width];
+            else {
+                const g = a[i - 1] + a[i - width] - a[i - width - 1];
+                prediction = g < 0 ? 0 : g > 255 ? 255 : g;
+            }
+            a[i] = a[i] + prediction & 255;
+        }
+    }
+}
+export function isAnimated(data) {
+    const list = container(data);
+    const header = list[0];
+    return header && header.type === VP8X && header.data.length >= 10 && (header.data[0] & 2) !== 0 && list.some(c => c.type === ANMF);
+}
+export function decode(data) {
+    const list = container(data);
+    if (!list.length)
+        throw new Error('WebP: no image data');
+    let orientation = 1;
+    const exif = list.find(c => c.type === EXIF);
+    if (exif)
+        orientation = exifOrientation(exif.data);
+    if (list.some(c => c.type === ANMF)) {
+        const animation = decodeAnimation(data, true);
+        const frame = composite(animation)[0];
+        return { width: animation.width, height: animation.height, pixels: frame.pixels, orientation };
+    }
+    const image = decodeBitstream(list);
+    if (list[0].type === VP8X && list[0].data.length >= 10) {
+        const width = u24(list[0].data, 4) + 1, height = u24(list[0].data, 7) + 1;
+        if (width !== image.width || height !== image.height)
+            throw new Error('WebP: canvas and image sizes differ');
+    }
+    return { ...image, orientation };
+}
+export function decodeAnimation(data, onlyFirstFrame = false) {
+    const list = container(data);
+    const header = list[0];
+    if (!header || header.type !== VP8X || !list.some(c => c.type === ANMF)) {
+        const { width, height, pixels } = decodeBitstream(list);
+        return { width, height, loopCount: 0, background: 0, frames: [{ x: 0, y: 0, width, height, duration: 0, blend: false, dispose: false, pixels }] };
+    }
+    if (header.data.length < 10)
+        throw new Error('WebP: invalid VP8X chunk');
+    const width = u24(header.data, 4) + 1, height = u24(header.data, 7) + 1;
+    let loopCount = 0, background = 0;
+    const frames = [];
+    for (const chunk of list) {
+        if (chunk.type === ANIM && chunk.data.length >= 6) {
+            const d = chunk.data;
+            background = (d[3] << 24 | d[2] << 16 | d[1] << 8 | d[0]) >>> 0;
+            loopCount = d[4] | d[5] << 8;
+        }
+        else if (chunk.type === ANMF) {
+            const d = chunk.data;
+            if (d.length < 16)
+                throw new Error('WebP: invalid ANMF chunk');
+            const frame = decodeBitstream(chunks(d, 16, d.length));
+            frames.push({
+                x: u24(d, 0) * 2,
+                y: u24(d, 3) * 2,
+                width: frame.width,
+                height: frame.height,
+                duration: u24(d, 12),
+                blend: (d[15] & 2) === 0,
+                dispose: (d[15] & 1) === 1,
+                pixels: frame.pixels
+            });
+            if (onlyFirstFrame)
+                break;
+        }
+    }
+    if (!frames.length)
+        throw new Error('WebP: animation without frames');
+    return { width, height, loopCount, background, frames };
+}
+export function composite({ width, height, frames }) {
+    const canvas = new Uint8Array(width * height * 4);
+    const output = [];
+    for (const frame of frames) {
+        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++)
+            for (let x = x0; x < x1; x++) {
+                const s = ((y - frame.y) * frame.width + x - frame.x) * 4, d = (y * width + x) * 4;
+                const sa = frame.pixels[s + 3];
+                if (!frame.blend || sa === 255 || canvas[d + 3] === 0) {
+                    canvas[d] = frame.pixels[s];
+                    canvas[d + 1] = frame.pixels[s + 1];
+                    canvas[d + 2] = frame.pixels[s + 2];
+                    canvas[d + 3] = sa;
+                }
+                else if (sa !== 0)
+                    blendOver(frame.pixels, s, canvas, d);
+            }
+        output.push({ pixels: canvas.slice(), duration: frame.duration });
+        if (frame.dispose)
+            for (let y = y0; y < y1; y++)
+                canvas.fill(0, (y * width + x0) * 4, (y * width + x1) * 4);
+    }
+    return output;
+}
+function blendOver(src, s, dst, d) {
+    const sa = src[s + 3], da = dst[d + 3];
+    const dstFactor = da * (256 - sa) >> 8;
+    const alpha = sa + dstFactor;
+    const scale = alpha ? Math.floor((1 << 24) / alpha) : 0;
+    for (let c = 0; c < 3; c++) {
+        const blended = src[s + c] * sa + dst[d + c] * dstFactor;
+        dst[d + c] = blended * scale >>> 24;
+    }
+    dst[d + 3] = alpha;
+}
+function riffChunk(type, body) {
+    const out = new Uint8Array(8 + body.length + (body.length & 1));
+    const view = new DataView(out.buffer);
+    view.setUint32(0, fourCC(type), true);
+    view.setUint32(4, body.length, true);
+    out.set(body, 8);
+    return out;
+}
+function riff(chunks) {
+    let size = 4;
+    for (const c of chunks)
+        size += c.length;
+    const out = new Uint8Array(8 + size);
+    const view = new DataView(out.buffer);
+    view.setUint32(0, RIFF, true);
+    view.setUint32(4, size, true);
+    view.setUint32(8, WEBP, true);
+    let offset = 12;
+    for (const c of chunks) {
+        out.set(c, offset);
+        offset += c.length;
+    }
+    return out;
+}
+function toARGB(rgba, count) {
+    const argb = new Uint32Array(count);
+    for (let i = 0, o = 0; i < count; i++, o += 4)
+        argb[i] = (rgba[o + 3] << 24 | rgba[o] << 16 | rgba[o + 1] << 8 | rgba[o + 2]) >>> 0;
+    return argb;
+}
+const set24 = (d, o, v) => { d[o] = v & 255; d[o + 1] = v >> 8 & 255; d[o + 2] = v >> 16 & 255; };
+export function encode(rgba, width, height) {
+    return riff([riffChunk('VP8L', vp8l.encode(toARGB(rgba, width * height), width, height))]);
+}
+export function encodeAnimation(frames, width, height, plays) {
+    if (!frames.length)
+        throw new Error('WebP: an animation needs at least one frame');
+    if (width > 1 << 24 || height > 1 << 24)
+        throw new RangeError('WebP: canvas too large');
+    let alpha = false;
+    for (const f of frames)
+        for (let i = 3; i < f.pixels.length && !alpha; i += 4)
+            if (f.pixels[i] !== 255)
+                alpha = true;
+    const vp8x = new Uint8Array(10);
+    vp8x[0] = 2 | (alpha ? 16 : 0);
+    set24(vp8x, 4, width - 1);
+    set24(vp8x, 7, height - 1);
+    const anim = new Uint8Array(6);
+    anim[4] = plays & 255;
+    anim[5] = plays >> 8 & 255;
+    const chunks = [riffChunk('VP8X', vp8x), riffChunk('ANIM', anim)];
+    for (const f of frames) {
+        if (f.x & 1 || f.y & 1)
+            throw new RangeError('WebP: frame offsets have to be even');
+        const bitstream = riffChunk('VP8L', vp8l.encode(toARGB(f.pixels, f.width * f.height), f.width, f.height));
+        const header = new Uint8Array(16);
+        set24(header, 0, f.x >> 1);
+        set24(header, 3, f.y >> 1);
+        set24(header, 6, f.width - 1);
+        set24(header, 9, f.height - 1);
+        set24(header, 12, Math.min(0xffffff, Math.max(0, Math.round(f.duration))));
+        header[15] = f.dispose ? 1 : 0;
+        const body = new Uint8Array(16 + bitstream.length);
+        body.set(header);
+        body.set(bitstream, 16);
+        chunks.push(riffChunk('ANMF', body));
+    }
+    return riff(chunks);
+}

package/dist/frame.d.ts

@@ -1,28 +1,28 @@
 import { Image, ResizeMode } from './image.js';
-/** Names of the GIF frame disposal modes, see {@link Frame.disposalMode} */
+/** Names of the frame disposal modes, see {@link Frame.disposalMode} */
 export type FrameDisposalModeName = 'any' | 'keep' | 'previous' | 'background';
-/** Ids of the GIF frame disposal modes as stored in the file (0 any, 1 keep, 2 previous, 3 background) */
+/** Ids of the frame disposal modes, as GIFs store them (0 any, 1 keep, 2 previous, 3 background) */
 export type FrameDisposalModeId = 0 | 1 | 2 | 3;
 /**
- * Represents a frame in a GIF
+ * Represents a frame of an {@link Animation}
  */
 export declare class Frame extends Image {
     /**
-     * Milliseconds. GIFs store hundredths of a second, so this is rounded to 10 ms when encoding;
+     * Milliseconds. GIFs store hundredths of a second, so this is rounded to 10 ms when encoding a GIF;
      * note that browsers play frames shorter than 20 ms with 100 ms
      */
     duration: number;
-    /** The frame's horizontal offset in the GIF */
+    /** The frame's horizontal offset in the animation */
     xOffset: number;
-    /** The frame's vertical offset in the GIF */
+    /** The frame's vertical offset in the animation */
     yOffset: number;
-    /** GIF frame disposal mode ANY: the decoder decides (in practice like KEEP). For use with {@link Frame} */
+    /** Frame disposal mode ANY: the decoder decides (in practice like KEEP). For use with {@link Frame} */
     static get DISPOSAL_ANY(): 'any';
-    /** GIF frame disposal mode KEEP. For use with {@link Frame} */
+    /** Frame disposal mode KEEP. For use with {@link Frame} */
     static get DISPOSAL_KEEP(): 'keep';
-    /** GIF frame disposal mode PREVIOUS. For use with {@link Frame} */
+    /** Frame disposal mode PREVIOUS. For use with {@link Frame} */
     static get DISPOSAL_PREVIOUS(): 'previous';
-    /** GIF frame disposal mode BACKGROUND. For use with {@link Frame} */
+    /** Frame disposal mode BACKGROUND. For use with {@link Frame} */
     static get DISPOSAL_BACKGROUND(): 'background';
     /**
      * Creates a new, blank frame

package/dist/gif.d.ts

@@ -1,44 +1,31 @@
 import { BinaryData } from './util/mem.js';
-import { ResizeMode } from './image.js';
 import { Frame } from './frame.js';
+import { Animation } from './animation.js';
 /**
- * Represents a GIF image as an array of frames.
+ * Represents a GIF image as an array of frames, an {@link Animation} whose `encode()` and `decode()` work with GIFs.
  * Array methods like map and filter return plain arrays.
+ * @deprecated Use {@link Animation}, which works the same and also handles APNG: `new Animation(frames, loopCount)`,
+ *     {@link Animation.decode} and {@link Animation.encodeGIF}. `GIF` will be removed in 4.0
  */
-export declare class GIF extends Array<Frame> {
-    /** How many times to repeat the GIF (-1 = forever, 0 = play once) */
-    loopCount: number;
+export declare class GIF extends Animation {
     /**
      * Creates a new GIF image
      * @param frames The frames to create the GIF from
      * @param loopCount How many times to repeat the GIF (-1 = forever, 0 = play once)
      */
     constructor(frames: Frame[], loopCount?: number);
-    /** The GIF's width */
-    get width(): number;
-    /** The GIF's height */
-    get height(): number;
-    /** The GIF's duration (in ms) */
-    get duration(): number;
     toString(): string;
-    /**
-     * Returns a new GIF containing a range of this GIF's frames (same semantics as Array.prototype.slice)
-     */
-    slice(start?: number, end?: number): GIF;
     /**
      * Encodes the GIF
      * @param quality 1-100, scales the palette size from 8 colors (1) to 256 colors (90 and above)
+     * @deprecated Use {@link Animation.encodeGIF}
      */
     encode(quality?: number): Promise<Uint8Array>;
     /**
      * Decodes a GIF into fully composited frames
      * @param input The binary data to decode
      * @param onlyExtractFirstFrame Whether to end GIF decoding after the first frame
+     * @deprecated Use {@link Animation.decode}, which decodes APNGs too
      */
     static decode(input: BinaryData, onlyExtractFirstFrame?: boolean): Promise<GIF>;
-    /**
-     * Resizes the GIF 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;
 }

package/dist/gif.js

@@ -1,93 +1,20 @@
-import * as codec from "./codecs/gif.js";
 import { view } from "./util/mem.js";
-import { Image } from "./image.js";
-import { Frame } from "./frame.js";
 import { ImageType } from "./image-type.js";
-export class GIF extends Array {
-    loopCount;
+import { Animation } from "./animation.js";
+export class GIF extends Animation {
     constructor(frames, loopCount = -1) {
-        super();
-        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 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;
+        super(frames, loopCount);
     }
     toString() {
         return `GIF<${this.width}x${this.height}x${this.duration}ms>`;
     }
-    slice(start, end) {
-        return new GIF(Array.prototype.slice.call(this, start, end), this.loopCount);
-    }
     async encode(quality = 95) {
-        const frames = [];
-        for (const frame of this) {
-            if (!(frame instanceof Frame))
-                throw new Error('GIF contains invalid frames');
-            frames.push({
-                x: frame.xOffset,
-                y: frame.yOffset,
-                width: frame.width,
-                height: frame.height,
-                delay: Math.round(frame.duration / 10),
-                dispose: frame.__disposal_id__,
-                pixels: new Uint8Array(frame.bitmap.buffer, frame.bitmap.byteOffset, frame.bitmap.byteLength)
-            });
-        }
-        return codec.encode({ width: this.width, height: this.height, loopCount: this.loopCount, frames }, quality);
+        return this.encodeGIF(quality);
     }
     static async decode(input, onlyExtractFirstFrame = false) {
         const data = view(input);
         if (!ImageType.isGIF(new DataView(data.buffer, data.byteOffset, data.byteLength)))
             throw new Error('Unsupported image type');
-        const decoded = codec.decode(data, onlyExtractFirstFrame);
-        const frames = codec.composite(decoded).map(({ pixels, delay }) => {
-            const frame = new Frame(decoded.width, decoded.height, 10 * delay, 0, 0, Frame.DISPOSAL_BACKGROUND);
-            frame.bitmap.set(pixels);
-            return frame;
-        });
-        return new GIF(frames, decoded.loopCount);
-    }
-    resize(width, height, mode = 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;
+        return Animation.__fromGIF__(data, onlyExtractFirstFrame, GIF);
     }
 }

package/dist/image-type.d.ts

@@ -1,6 +1,6 @@
 import { BinaryData } from './util/mem.js';
 /** Image formats recognized by {@link ImageType.getType} */
-export type ImageTypeName = 'png' | 'jpeg' | 'tiff' | 'gif';
+export type ImageTypeName = 'png' | 'jpeg' | 'tiff' | 'gif' | 'webp' | 'tga';
 /** Detects image formats by their magic numbers */
 export declare class ImageType {
     /**
@@ -17,4 +17,8 @@ export declare class ImageType {
     static isTIFF(data: BinaryData): boolean;
     /** Whether the data starts like a GIF */
     static isGIF(data: BinaryData): boolean;
+    /** Whether the data starts like a WebP */
+    static isWebP(data: BinaryData): boolean;
+    /** Whether the data looks like a TGA (which has no magic number: its header has to be consistent) */
+    static isTGA(data: BinaryData): boolean;
 }

package/dist/image-type.js

@@ -1,4 +1,5 @@
 import { view as bytes } from "./util/mem.js";
+import { isTGA } from "./codecs/tga.js";
 const MAGIC_NUMBERS = {
     PNG: 0x89504e47,
     JPEG: 0xffd8ff,
@@ -6,7 +7,9 @@ const MAGIC_NUMBERS = {
     TIFF_BE: 0x4d4d002a,
     BIGTIFF_LE: 0x49492b00,
     BIGTIFF_BE: 0x4d4d002b,
-    GIF: 0x474946
+    GIF: 0x474946,
+    RIFF: 0x52494646,
+    WEBP: 0x57454250
 };
 function dataView(data) {
     if (data instanceof DataView)
@@ -25,6 +28,10 @@ export class ImageType {
             return 'tiff';
         if (this.isGIF(view))
             return 'gif';
+        if (this.isWebP(view))
+            return 'webp';
+        if (this.isTGA(view))
+            return 'tga';
         return null;
     }
     static isPNG(data) {
@@ -46,4 +53,12 @@ export class ImageType {
         const view = dataView(data);
         return view.byteLength >= 4 && (view.getUint32(0, false) >>> 8) === MAGIC_NUMBERS.GIF;
     }
+    static isWebP(data) {
+        const view = dataView(data);
+        return view.byteLength >= 12 && view.getUint32(0, false) === MAGIC_NUMBERS.RIFF && view.getUint32(8, false) === MAGIC_NUMBERS.WEBP;
+    }
+    static isTGA(data) {
+        const view = dataView(data);
+        return isTGA(new Uint8Array(view.buffer, view.byteOffset, view.byteLength));
+    }
 }

package/dist/image.d.ts

@@ -19,7 +19,7 @@ export interface CompositeOptions {
 }
 /** Options of {@link Image.decode} */
 export interface DecodeOptions {
-    /** Whether to rotate/mirror JPEGs, TIFFs and PNGs as their orientation tag (Exif or XMP) says. Default: `true` */
+    /** Whether to rotate/mirror JPEGs, TIFFs, PNGs and WebPs as their orientation tag (Exif or XMP) says. Default: `true` */
     applyOrientation?: boolean;
 }
 /** Text style options of {@link Image.renderText} */
@@ -28,6 +28,12 @@ export interface TextStyle {
     strokeWidth?: number;
     /** Color of the outline. Default: `0x000000ff` */
     strokeColor?: Color;
+    /**
+     * Whether to run the hinting instructions of TrueType fonts, which align stems and edges with the pixel grid for
+     * crisper text at small sizes (like Windows renders text); the glyphs of hinted fonts are then placed on whole
+     * pixels. Fonts without instructions (and CFF/OpenType outlines) aren't affected. Default: `true`
+     */
+    hinting?: boolean;
 }
 /** Options of {@link Image.cropCircle} */
 export interface CropCircleOptions {
@@ -50,6 +56,13 @@ export interface RotateOptions {
     /** Whether to resize the image so it fits all pixels or just ignore outlying pixels. Default: `true` */
     resize?: boolean;
 }
+/** Options of {@link Image.colorToAlpha} */
+export interface ColorToAlphaOptions {
+    /** Pixels at most this far from the color (0-1) become fully transparent. Default: 0 */
+    transparencyThreshold?: number;
+    /** Pixels at least this far from the color (0-1) stay fully opaque. Default: 1 */
+    opacityThreshold?: number;
+}
 /** Text metadata written into PNGs by {@link Image.encode} */
 export interface PNGMetadata {
     /** The image's title */
@@ -399,6 +412,16 @@ export declare class Image {
      * Applies a sepia tone
      */
     sepia(): this;
+    /**
+     * Makes a color transparent, like GIMP's "Color to Alpha": the color is removed from every pixel and replaced by
+     * transparency, so pixels that are partly the color (e.g. antialiased edges against a background) become
+     * semi-transparent instead of keeping a fringe of it.
+     * The color is removed everywhere in the image, not only from a connected background: removing a white
+     * background also makes white areas inside the subject (e.g. eyes in a logo) transparent
+     * @param color The color to remove, by default the color of the top left pixel (e.g. a background)
+     * @param options See {@link ColorToAlphaOptions}
+     */
+    colorToAlpha(color?: Color, options?: ColorToAlphaOptions): this;
     /**
      * Gets the average color of the image, weighting each pixel by its opacity
      * @returns The average color (fully opaque), black for fully transparent images
@@ -478,7 +501,16 @@ export declare class Image {
      */
     encodeJPEG(quality?: number): Promise<Uint8Array>;
     /**
-     * Decodes an image (PNG, JPEG or TIFF)
+     * Encodes the image as lossless WebP (usually 20-30% smaller than PNG, but slower to encode)
+     */
+    encodeWebP(): Promise<Uint8Array>;
+    /**
+     * Encodes the image as run length encoded TGA (32 bit, or 24 bit if the image is opaque)
+     */
+    encodeTGA(): Promise<Uint8Array>;
+    /**
+     * Decodes an image (PNG, JPEG, TIFF, WebP or TGA). For APNGs this is the default image; animated WebPs and GIFs
+     * have no single image, decode those with {@link Animation.decode}
      * @param input The binary data to decode
      * @param options See {@link DecodeOptions}. JPEGs, TIFFs and PNGs are rotated/mirrored as their orientation tag
      *     (Exif, for PNGs also XMP) says by default: photos taken with a rotated camera are stored sideways