imagescript 1.2.8 → 1.2.15

package/ImageScript.d.ts

@@ -0,0 +1,223 @@
+export class Image {
+  private __width__: number;
+  private __height__: number;
+  private __buffer__: ArrayBuffer;
+  private __view__: DataView;
+  private __u32__: Uint32Array;
+  bitmap: Uint8ClampedArray;
+
+  constructor(width: number, height: number);
+
+  private toString(): string;
+
+  get width(): number;
+
+  get height(): number;
+
+  * [Symbol.iterator](): void;
+
+  * iterateWithColors(): Generator<[x: number, y: number, color: number], void, unknown>;
+  
+  static rgbaToColor(r: number, g: number, b: number, a: number): number;
+
+  static rgbToColor(r: number, g: number, b: number): number;
+
+  static hslaToColor(h: number, s: number, l: number, a: number): number;
+
+  static hslToColor(h: number, s: number, l: number): number;
+
+  static rgbaToHSLA(r: number, g: number, b: number, a: number): number[];
+
+  static colorToRGBA(color: number): number[];
+
+  static colorToRGB(color: number): number[];
+
+  getPixelAt(x: number, y: number): number;
+
+  getRGBAAt(x: number, y: number): Uint8ClampedArray;
+
+  setPixelAt(x: number, y: number, pixelColor: number): Image;
+
+  private __set_pixel__(x: number, y: number, pixelColor: number): void;
+
+  private __check_boundaries__(x: number, y: number): void;
+
+  private static get __out_of_bounds__(): string;
+
+  fill(color: number | colorFunction): Image;
+
+  clone(): Image;
+
+  static get RESIZE_NEAREST_NEIGHBOR(): string;
+
+  static get RESIZE_AUTO(): number;
+
+  scale(factor: number, mode?: string): Image;
+
+  private __scale__(factor: number, mode?: string);
+
+  resize(width: number, height: number, mode?: string): Image;
+
+  contain(width: number, height: number, mode?: string): Image;
+
+  fit(width: number, height: number, mode?: string): Image;
+
+  cover(width: number, height: number, mode?: string): Image;
+
+  private __resize__(width: number, height: number, mode?: string): Image;
+
+  private __resize_nearest_neighbor__(width: number, height: number): Image;
+
+  crop(x: number, y: number, width: number, height: number): Image;
+
+  private __crop__(x: number, y: number, width: number, height: number): Image;
+
+  drawBox(x: number, y: number, width: number, height: number, color: number | colorFunction): Image;
+
+  private __fast_box__(x: number, y: number, width: number, height: number, color: number): Image;
+
+  drawCircle(x: number, y: number, radius: number, color: number | colorFunction): Image;
+
+  cropCircle(max?: boolean, feathering?: number): Image;
+
+  opacity(opacity: number, absolute?: boolean): Image;
+
+  red(saturation: number, absolute?: boolean): Image;
+
+  green(saturation: number, absolute?: boolean): Image;
+
+  blue(saturation: number, absolute?: boolean): Image;
+
+  private __set_channel_value__(value: number, absolute: boolean, offset: number): void;
+
+  lightness(value: number, absolute?: boolean): Image;
+
+  saturation(value: number, absolute?: boolean): Image;
+
+  composite(source: Image, x?: number, y?: number): Image;
+
+  invert(): Image;
+
+  invertValue(): Image;
+
+  invertSaturation(): Image;
+
+  invertHue(): Image;
+
+  hueShift(degrees: number): Image;
+
+  averageColor(): number;
+
+  dominantColor(ignoreBlack?: boolean, ignoreWhite?: boolean, bwThreshold?: number): number;
+
+  rotate(angle: number, resize?: boolean): Image;
+
+  private __apply__(image: Image | Frame): Image | Frame;
+
+  static gradient(colors: { [position: number]: number; }): ((position: number) => number);
+
+  roundCorners(radius?: number): Image;
+
+  private static __gradient__(startColor: number, endColor: number): number;
+
+  fisheye(radius?: number): Image;
+
+  async encode(compression?: number, metadata?: PNGMetadata): Promise<Uint8Array>;
+  async encode(metadata?: PNGMetadata): Promise<Uint8Array>;
+
+  async encodeJPEG(quality?: number): Promise<Uint8Array>;
+
+  async encodeWEBP(quality?: null | number): Promise<Uint8Array>;
+
+  static async encode(data: Buffer | Uint8Array): Promise<Image>
+
+  static get SVG_MODE_SCALE(): number;
+
+  static get SVG_MODE_WIDTH(): number;
+
+  static get SVG_MODE_HEIGHT(): number;
+
+  static async renderSVG(svg: string, size?: number, mode?: number): Promise<Image>;
+
+  static async renderText(font: Uint8Array, scale: number, text: string, color?: number, layout?: TextLayout): Promise<Image>;
+};
+
+export class Frame extends Image {
+  static get DISPOSAL_KEEP(): string;
+
+  static get DISPOSAL_PREVIOUS(): string;
+
+  static get DISPOSAL_BACKGROUND(): string
+
+  private static __convert_disposal_mode__(mode: string | number): any;
+
+  constructor(width: number, height: number, duration?: number, xOffset?: number, yOffset?: number, disposalMode?: typeof Frame.DISPOSAL_KEEP | string);
+
+  toString(): string;
+
+  static from(image: Image, duration?: number, xOffset?: number, yOffset?: number, disposalMode?: typeof Frame.DISPOSAL_KEEP | string): Frame;
+
+  resize(width: number, height: number, mode?: typeof Image.RESIZE_NEAREST_NEIGHBOR | string): Image;
+};
+
+export class GIF extends Array {
+  constructor(frames: Frame[], loopCount?: number);
+
+  get width(): number;
+
+  get height(): number;
+
+  toString(): string;
+
+  * [Symbol.iterator](): Generator<Frame, void, *>
+
+  slice(start: number, end: number): GIF;
+
+  get duration(): number;
+
+  async encode(quality?: number): Promise<Uint8Array>
+
+  static async decode(data: Buffer | Uint8Array, onlyExtractFirstFrame?: boolean): Promise<GIF>;
+
+  resize(width: number, height: number, mode?: typeof Image.RESIZE_NEAREST_NEIGHBOR | string): void;
+}
+
+export class TextLayout {
+  constructor(options?: {
+    maxWidth?: number,
+    maxHeight?: number,
+    wrapStyle?: string,
+    verticalAlign?: string,
+    horizontalAlign?: string,
+    wrapHardBreaks?: boolean
+  });
+};
+
+export class ImageType {
+  static getType(data: Buffer | Uint8Array): string | null;
+
+  static isPNG(view: DataView): boolean;
+
+  static isJPEG(view: DataView): boolean;
+
+  static isTIFF(view: DataView): boolean;
+
+  static isGIF(view: DataView): boolean;
+};
+
+export function decode(data: Uint8Array | Buffer, onlyExtractFirstFrame?: boolean): Promise<GIF | Image>;
+
+type colorFunction = (x: number, y: number) => number;
+
+type PNGMetadata = {
+  title?: string,
+  author?: string,
+  description?: string,
+  copyright?: string,
+  creationTime?: string | number | Date,
+  software?: string,
+  disclaimer?: string,
+  warning?: string,
+  source?: string,
+  comment?: string
+};

package/ImageScript.js

@@ -1,11 +1,13 @@
 const png = require('./png/node.js');
 const mem = require('./utils/mem.js');
-const codecs = require('./node/index.js');
 const {version} = require('./package.json');
+const codecs = require('./codecs/node/index.js');
+const { default: v2 } = require('./v2/framebuffer.js');
 
 // old
 const svglib = require('./wasm/node/svg.js');
 const giflib = require('./wasm/node/gif.js');
+const pnglib = require('./wasm/node/png.js');
 const fontlib = require('./wasm/node/font.js');
 const jpeglib = require('./wasm/node/jpeg.js');
 const tifflib = require('./wasm/node/tiff.js');
@@ -82,26 +84,16 @@ class Image {
      * @yields {number[]} The coordinates of the pixel ([x, y])
      * @returns {void}
      */
-    * [Symbol.iterator]() {
-        for (let y = 1; y <= this.height; y++) {
-            for (let x = 1; x <= this.width; x++) {
-                yield [x, y];
-            }
-        }
+    *[Symbol.iterator]() {
+        for (const x of new v2(this.width, this.height, this.bitmap)[Symbol.iterator]()) yield (x[0]++, x[1]++, x)
     }
 
     /**
      * Yields an [x, y, color] array for every pixel in the image
      * @yields {number[]} The coordinates and color of the pixel ([x, y, color])
      */
-    * iterateWithColors() {
-        let offset = 0;
-        for (let y = 1; y <= this.height; y++) {
-            for (let x = 1; x <= this.width; x++) {
-                yield [x, y, this.__view__.getUint32(offset, false)];
-                offset += 4;
-            }
-        }
+    *iterateWithColors() {
+        for (const x of new v2(this.width, this.height, this.bitmap).pixels('int')) yield (x[0]++, x[1]++, x);
     }
 
     /**
@@ -319,19 +311,7 @@ class Image {
      * @returns {Image}
      */
     fill(color) {
-        const type = typeof color;
-        if (type !== 'function') {
-            this.__view__.setUint32(0, color, false);
-            this.__u32__.fill(this.__u32__[0]);
-        } else {
-            let offset = 0;
-            for (let y = 1; y <= this.height; y++) {
-                for (let x = 1; x <= this.width; x++) {
-                    this.__view__.setUint32(offset, color(x, y), false);
-                    offset += 4;
-                }
-            }
-        }
+        new v2(this.width, this.height, this.bitmap).fill(color);
 
         return this;
     }
@@ -392,6 +372,48 @@ class Image {
         return this.__apply__(image);
     }
 
+    /**
+     * Resizes the image so it is contained in the given bounding box.
+     * Can return an image with one axis smaller than the given bounding box.
+     * @param {number} width The width of the bounding box
+     * @param {number} height The height of the bounding box
+     * @param {string} [mode=Image.RESIZE_NEAREST_NEIGHBOR] The resizing mode to use
+     * @returns {Image} The resized image
+     */
+    contain(width, height, mode = Image.RESIZE_NEAREST_NEIGHBOR) {
+        const scaleFactor = width / height > this.width / this.height ? height / this.height : width / this.width;
+        return this.scale(scaleFactor, mode);
+    }
+
+    /**
+     * Resizes the image so it is contained in the given bounding box, placing it in the center of the given bounding box.
+     * Always returns the exact dimensions of the bounding box.
+     * @param {number} width The width of the bounding box
+     * @param {number} height The height of the bounding box
+     * @param {string} [mode=Image.RESIZE_NEAREST_NEIGHBOR] The resizing mode to use
+     * @returns {Image} The resized image
+     */
+    fit(width, height, mode = Image.RESIZE_NEAREST_NEIGHBOR) {
+        const result = new Image(width, height);
+        this.contain(width, height, mode);
+        result.composite(this, (width - this.width) / 2, (height - this.height) / 2);
+        return this.__apply__(result);
+    }
+
+    /**
+     * Resizes the image so it covers the given bounding box, cropping the overflowing edges.
+     * Always returns the exact dimensions of the bounding box.
+     * @param {number} width The width of the bounding box
+     * @param {number} height The height of the bounding box
+     * @param {string} [mode=Image.RESIZE_NEAREST_NEIGHBOR] The resizing mode to use
+     * @returns {Image} The resized image
+     */
+    cover(width, height, mode = Image.RESIZE_NEAREST_NEIGHBOR) {
+        const scaleFactor = width / height > this.width / this.height ? width / this.width : height / this.height;
+        const result = this.scale(scaleFactor, mode);
+        return result.crop((result.width - width) / 2, (result.height - height) / 2, width, height);
+    }
+
     /** @private */
     __resize__(width, height, mode = Image.RESIZE_NEAREST_NEIGHBOR) {
         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');
@@ -420,18 +442,9 @@ class Image {
      */
     __resize_nearest_neighbor__(width, height) {
         const image = new this.constructor(width, height);
+        const frame = new v2(this.width, this.height, this.bitmap).resize('nearest', width, height);
 
-        for (let y = 0; y < height; y++) {
-            for (let x = 0; x < width; x++) {
-                const ySrc = Math.floor((y * this.height) / height);
-                const xSrc = Math.floor((x * this.width) / width);
-
-                const destPos = (y * width + x) * 4;
-                const srcPos = (ySrc * this.width + xSrc) * 4;
-
-                image.__view__.setUint32(destPos, this.__view__.getUint32(srcPos, false), false);
-            }
-        }
+        image.bitmap.set(frame.u8);
 
         return image;
     }
@@ -565,19 +578,7 @@ class Image {
      * @returns {Image}
      */
     cropCircle(max = false, feathering = 0) {
-        const rad = Math[max ? 'max' : 'min'](this.width, this.height) / 2;
-        const radSquared = rad ** 2;
-        const centerX = this.width / 2;
-        const centerY = this.height / 2;
-
-        for (const [x, y] of this) {
-            const distanceFromCenter = (x - centerX) ** 2 + (y - centerY) ** 2;
-            const alphaIdx = ((y - 1) * this.width + (x - 1)) * 4 + 3;
-            if (distanceFromCenter > radSquared)
-                this.bitmap[alphaIdx] = 0;
-            else if (feathering)
-                this.bitmap[alphaIdx] *= Math.max(0, Math.min(1, 1 - (distanceFromCenter / radSquared) * feathering ** (1 / 2)));
-        }
+        new v2(this.width, this.height, this.bitmap).crop('circle', feathering);
 
         return this;
     }
@@ -693,48 +694,11 @@ class Image {
      * @returns {Image}
      */
     composite(source, x = 0, y = 0) {
-        x = ~~x;
-        y = ~~y;
-
-        for (let yy = 0; yy < source.height; yy++) {
-            let y_offset = y + yy;
-            if (y_offset < 0) continue;
-            if (y_offset >= this.height) break;
-
-            for (let xx = 0; xx < source.width; xx++) {
-                let x_offset = x + xx;
-                if (x_offset < 0) continue;
-                if (x_offset >= this.width) break;
-
-                const offset = 4 * (x_offset + y_offset * this.width);
-                const fg = source.__view__.getUint32(4 * (xx + yy * source.width), false);
-                const bg = this.__view__.getUint32(offset, false);
-
-                if ((fg & 0xff) === 0xff) this.__view__.setUint32(offset, fg, false);
-                else if ((fg & 0xff) === 0x00) this.__view__.setUint32(offset, bg, false);
-                else this.__view__.setUint32(offset, Image.__alpha_blend__(fg, bg), false);
-            }
-        }
+        new v2(this.width, this.height, this.bitmap).overlay(new v2(source.width, source.height, source.bitmap), x, y);
 
         return this;
     }
 
-    /**
-     * @private
-     * @param {number} fg
-     * @param {number} bg
-     * @returns {number}
-     */
-    static __alpha_blend__(fg, bg) {
-        const fa = fg & 0xff;
-        const alpha = fa + 1;
-        const inv_alpha = 256 - fa;
-        const r = (alpha * (fg >>> 24) + inv_alpha * (bg >>> 24)) >> 8;
-        const b = (alpha * (fg >> 8 & 0xff) + inv_alpha * (bg >> 8 & 0xff)) >> 8;
-        const g = (alpha * (fg >> 16 & 0xff) + inv_alpha * (bg >> 16 & 0xff)) >> 8;
-        return (((r & 0xff) << 24) | ((g & 0xff) << 16) | ((b & 0xff) << 8) | (Math.max(fa, bg & 0xff) & 0xff));
-    }
-
     /**
      * Inverts the images colors
      * @returns {Image}
@@ -857,110 +821,14 @@ class Image {
      * @param {boolean} resize Whether to resize the image so it fits all pixels or just ignore outlying pixels
      */
     rotate(angle, resize = true) {
-        if (angle % 360 === 0) return this;
-        if (angle % 180 === 0) return this.__rotate_180__();
-
-        const rad = Math.PI * (angle / 180);
-
-        const sin = Math.sin(rad);
-        const cos = Math.cos(rad);
-
-        const width = resize
-            ? Math.abs(this.width * sin) + Math.abs(this.height * cos)
-            : this.width;
-        const height = resize
-            ? Math.abs(this.width * cos) + Math.abs(this.height * sin)
-            : this.height;
-
-        const out = new Image(width, height);
+        const frame = new v2(this.width, this.height, this.bitmap).rotate(360 - (angle % 360), resize);
 
-        const out_cx = width / 2 - .5;
-        const out_cy = height / 2 - .5;
-        const src_cx = this.width / 2 - .5;
-        const src_cy = this.height / 2 - .5;
-
-        let h = 0;
-        do {
-            let w = 0;
-            const ysin = src_cx - sin * (h - out_cy);
-            const ycos = src_cy + cos * (h - out_cy);
-
-            do {
-                const xf = ysin + cos * (w - out_cx);
-                const yf = ycos + sin * (w - out_cx);
-                Image.__interpolate__(this, out, w, h, xf, yf);
-            } while (w++ < width);
-        } while (h++ < height);
+        const out = new Image(frame.width, frame.height);
 
+        out.bitmap.set(frame.u8);
         return this.__apply__(out);
     }
 
-    /**
-     * @returns {Image}
-     * @private
-     */
-    __rotate_180__() {
-        let offset = 0;
-        this.bitmap.reverse();
-        while (offset < this.bitmap.length) this.bitmap.subarray(offset, offset += 4).reverse();
-
-        return this;
-    }
-
-    /**
-     * @param {Image} src
-     * @param {Image} out
-     * @param {number} x0
-     * @param {number} y0
-     * @param {number} x1
-     * @param {number} y1
-     * @private
-     */
-    static __interpolate__(src, out, x0, y0, x1, y1) {
-        const x2 = ~~x1;
-        const y2 = ~~y1;
-        const xq = x1 - x2;
-        const yq = y1 - y2;
-        const out_slice = out.bitmap.subarray(4 * (x0 + y0 * out.width), -4);
-
-        const ref = {
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 0,
-        };
-
-        Image.__pawn__(x2, y2, (1 - xq) * (1 - yq), ref, src);
-        Image.__pawn__(1 + x2, y2, xq * (1 - yq), ref, src);
-        Image.__pawn__(x2, 1 + y2, (1 - xq) * yq, ref, src);
-        Image.__pawn__(1 + x2, 1 + y2, xq * yq, ref, src);
-
-        out_slice[3] = ref.a;
-        out_slice[0] = ref.r / ref.a;
-        out_slice[1] = ref.g / ref.a;
-        out_slice[2] = ref.b / ref.a;
-    }
-
-    /** @private */
-    static __pawn__(point0, point1, weight, ref, src) {
-        if (
-            point0 > 0
-            && point1 > 0
-            && point0 < src.width
-            && point1 < src.height
-        ) {
-            const offset = 4 * (point0 + point1 * src.width);
-            const src_slice = src.bitmap.subarray(offset, offset + 4);
-
-            const wa = weight * src_slice[3];
-
-            ref.a += wa;
-            ref.r += wa * src_slice[0];
-            ref.g += wa * src_slice[1];
-            ref.b += wa * src_slice[2];
-        }
-    }
-
     /**
      * @private
      * @param {Image|Frame} image
@@ -1215,9 +1083,9 @@ class Image {
         const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
 
         if (ImageType.isPNG(view)) { // PNG
-            const {width, height, pixels} = await png.decode(data);
+            const {width, height, framebuffer} = (await pnglib.init()).decode(data);
             image = new Image(width, height);
-            image.bitmap.set(pixels);
+            image.bitmap.set(framebuffer);
         } else if (ImageType.isJPEG(view)) { // JPEG
             const framebuffer = (await jpeglib.init()).decode(data);
 
@@ -1631,7 +1499,7 @@ class GIF extends Array {
                 }
 
                 else if (0 === mode || 1 === mode) {
-                    t8.set(u8)
+                    t8.set(u8);
                     for (let y = 0 | 0; y < height; y++) {
                         const y_offset = fx + gwidth * (y + fy) | 0;