imagescript 3.2.0 → 3.3.0

package/dist/image.js

@@ -12,8 +12,10 @@ import { TextLayout } from "./text-layout.js";
 import { resolveMetadata, pngText, exifData } from "./metadata.js";
 import { encode as utf8 } from "./util/utf8.js";
 import { resample, BOX, TRIANGLE, CUBIC } from "./util/resample.js";
-import { gaussianBlur, premultiply, unpremultiply } from "./util/blur.js";
-import { isOptions } from "./util/options.js";
+import { rotateBilinear } from "./util/rotate.js";
+import { gaussianBlur, boxBlurRGBA, premultiply, unpremultiply } from "./util/blur.js";
+import { isOptions, finite, color as checkColor } from "./util/options.js";
+import { MAX_PIXELS, decoding } from "./util/limits.js";
 export class Image {
     __width__;
     __height__;
@@ -70,13 +72,20 @@ export class Image {
                 yield [x, y, view.getUint32(offset, false)];
     }
     static rgbaToColor(r, g, b, a) {
+        r = finite(r, 'red');
+        g = finite(g, 'green');
+        b = finite(b, 'blue');
+        a = finite(a, 'alpha');
         return (channel(r) << 24 | channel(g) << 16 | channel(b) << 8 | channel(a)) >>> 0;
     }
     static rgbToColor(r, g, b) {
         return Image.rgbaToColor(r, g, b, 0xff);
     }
     static hslaToColor(h, s, l, a) {
-        h = wrapHue(h);
+        h = wrapHue(finite(h, 'hue'));
+        s = finite(s, 'saturation');
+        l = finite(l, 'lightness');
+        a = finite(a, 'alpha');
         s = Math.min(1, Math.max(0, s));
         l = Math.min(1, Math.max(0, l));
         a = Math.min(1, Math.max(0, a));
@@ -97,9 +106,10 @@ export class Image {
         return Image.hslaToColor(h, s, l, 1);
     }
     static rgbaToHSLA(r, g, b, a) {
-        r /= 255;
-        g /= 255;
-        b /= 255;
+        r = finite(r, 'red') / 255;
+        g = finite(g, 'green') / 255;
+        b = finite(b, 'blue') / 255;
+        a = finite(a, 'alpha');
         const max = Math.max(r, g, b), min = Math.min(r, g, b);
         let h = 0, s;
         const l = (max + min) / 2;
@@ -125,6 +135,7 @@ export class Image {
         return [h, s, l, a / 255];
     }
     static colorToRGBA(color) {
+        color = checkColor(color);
         return [(color >> 24) & 0xff, (color >> 16) & 0xff, (color >> 8) & 0xff, color & 0xff];
     }
     static colorToRGB(color) {
@@ -132,23 +143,23 @@ export class Image {
         return [r, g, b];
     }
     getPixelAt(x, y) {
-        x = ~~x;
-        y = ~~y;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
         this.__check_boundaries__(x, y);
         return this.__view__.getUint32((y * this.width + x) * 4, false);
     }
     getRGBAAt(x, y) {
-        x = ~~x;
-        y = ~~y;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
         this.__check_boundaries__(x, y);
         const idx = (y * this.width + x) * 4;
         return this.bitmap.subarray(idx, idx + 4);
     }
     setPixelAt(x, y, pixelColor) {
-        x = ~~x;
-        y = ~~y;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
         this.__check_boundaries__(x, y);
-        this.__set_pixel__(x, y, pixelColor);
+        this.__set_pixel__(x, y, checkColor(pixelColor));
         return this;
     }
     __set_pixel__(x, y, pixelColor) {
@@ -180,6 +191,7 @@ export class Image {
                     view.setUint32(offset, color(x, y), false);
         }
         else {
+            color = checkColor(color);
             if (!this.bitmap.length)
                 return this;
             view.setUint32(0, color, false);
@@ -189,8 +201,10 @@ export class Image {
         return this;
     }
     clone() {
-        const image = new Image(this.width, this.height);
-        image.bitmap.set(this.bitmap);
+        const image = new Image(1, 1);
+        image.__width__ = this.width;
+        image.__height__ = this.height;
+        image.__set_bitmap__(new Uint8ClampedArray(this.bitmap));
         return image;
     }
     static get RESIZE_NEAREST_NEIGHBOR() {
@@ -209,42 +223,43 @@ export class Image {
         return -1;
     }
     scale(factor, modeOrOptions) {
-        const image = this.__scale__(factor, resizeMode(modeOrOptions));
+        const { mode, fast } = resizeOptions(modeOrOptions);
+        const image = this.__scale__(factor, mode, fast);
         return this.__apply__(image);
     }
-    __scale__(factor, mode = Image.RESIZE_BILINEAR) {
+    __scale__(factor, mode = Image.RESIZE_BILINEAR, fast = true) {
         if (factor === 1)
             return this;
-        return this.__resize__(this.width * factor, this.height * factor, mode);
+        return this.__resize__(this.width * factor, this.height * factor, mode, fast);
     }
     resize(width, height, modeOrOptions) {
-        const mode = resizeMode(modeOrOptions);
-        const image = this.__resize__(width, height, mode);
+        const { mode, fast } = resizeOptions(modeOrOptions);
+        const image = this.__resize__(width, height, mode, fast);
         return this.__apply__(image);
     }
     contain(width, height, modeOrOptions) {
-        const mode = resizeMode(modeOrOptions);
-        width = Math.floor(width);
-        height = Math.floor(height);
+        const options = resizeOptions(modeOrOptions);
+        width = Math.floor(finite(width, 'width'));
+        height = Math.floor(finite(height, 'height'));
         const scale = Math.min(width / this.width, height / this.height);
-        return this.resize(Math.max(1, Math.min(width, Math.round(this.width * scale))), Math.max(1, Math.min(height, Math.round(this.height * scale))), mode);
+        return this.resize(Math.max(1, Math.min(width, Math.round(this.width * scale))), Math.max(1, Math.min(height, Math.round(this.height * scale))), options);
     }
     fit(width, height, modeOrOptions) {
-        const mode = resizeMode(modeOrOptions);
+        const options = resizeOptions(modeOrOptions);
         const result = new Image(width, height);
-        this.contain(width, height, mode);
+        this.contain(width, height, options);
         result.composite(this, (width - this.width) / 2, (height - this.height) / 2);
         return this.__apply__(result);
     }
     cover(width, height, modeOrOptions) {
-        const mode = resizeMode(modeOrOptions);
+        const options = resizeOptions(modeOrOptions);
         width = Math.floor(width);
         height = Math.floor(height);
         const scale = Math.max(width / this.width, height / this.height);
-        this.resize(Math.max(width, Math.round(this.width * scale)), Math.max(height, Math.round(this.height * scale)), mode);
+        this.resize(Math.max(width, Math.round(this.width * scale)), Math.max(height, Math.round(this.height * scale)), options);
         return this.crop((this.width - width) / 2, (this.height - height) / 2, width, height);
     }
-    __resize__(width, height, mode = Image.RESIZE_BILINEAR) {
+    __resize__(width, height, mode = Image.RESIZE_BILINEAR, fast = true) {
         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');
         else if (width === Image.RESIZE_AUTO)
@@ -263,7 +278,7 @@ export class Image {
         if (!filter)
             throw new Error('Invalid resize mode');
         const image = new Image(width, height);
-        resample(this.bitmap, this.width, this.height, width, height, filter, image.bitmap);
+        resample(this.bitmap, this.width, this.height, width, height, filter, image.bitmap, fast);
         return image;
     }
     __resize_nearest_neighbor__(width, height) {
@@ -278,10 +293,10 @@ export class Image {
         return image;
     }
     crop(x, y, width, height) {
-        x = ~~x;
-        y = ~~y;
-        width = ~~width;
-        height = ~~height;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
+        width = ~~finite(width, 'width');
+        height = ~~finite(height, 'height');
         const left = Math.max(0, x), top = Math.max(0, y);
         const right = Math.min(this.width, x + width), bottom = Math.min(this.height, y + height);
         if (right <= left || bottom <= top)
@@ -297,6 +312,8 @@ export class Image {
             throw new RangeError('Invalid tolerance, it has to be between 0 and 1');
         const bitmap = this.bitmap;
         const { width, height } = this;
+        if (color !== undefined)
+            color = checkColor(color);
         const c = color === undefined ? [bitmap[0], bitmap[1], bitmap[2], bitmap[3]] : [color >>> 24, color >> 16 & 255, color >> 8 & 255, color & 255];
         const limit = tolerance * 255;
         const matches = (x, y) => {
@@ -344,12 +361,12 @@ export class Image {
         return image;
     }
     drawBox(x, y, width, height, color) {
-        x = ~~x;
-        y = ~~y;
-        width = ~~width;
-        height = ~~height;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
+        width = ~~finite(width, 'width');
+        height = ~~finite(height, 'height');
         if (typeof color !== 'function')
-            return this.__fast_box__(x, y, width, height, color);
+            return this.__fast_box__(x, y, width, height, checkColor(color));
         for (let tY = Math.max(0, -y); tY < height && tY + y < this.height; tY++)
             for (let tX = Math.max(0, -x); tX < width && tX + x < this.width; tX++)
                 this.__set_pixel__(tX + x, tY + y, color(tX, tY));
@@ -369,8 +386,11 @@ export class Image {
         return this;
     }
     drawCircle(x, y, radius, color) {
-        x = ~~x;
-        y = ~~y;
+        x = ~~finite(x, 'x');
+        y = ~~finite(y, 'y');
+        radius = finite(radius, 'radius');
+        if (typeof color !== 'function')
+            color = checkColor(color);
         const cx = x + 0.5, cy = y + 0.5;
         for (let py = Math.max(0, Math.floor(cy - radius)); py < Math.min(this.height, Math.ceil(cy + radius)); py++) {
             for (let px = Math.max(0, Math.floor(cx - radius)); px < Math.min(this.width, Math.ceil(cx + radius)); px++) {
@@ -402,6 +422,7 @@ export class Image {
     cropCircle(maxOrOptions = false, featheringArgument = 0) {
         const { max = false, feathering = 0 } = typeof maxOrOptions === 'object' && maxOrOptions !== null
             ? maxOrOptions : { max: maxOrOptions, feathering: featheringArgument };
+        finite(feathering, 'feathering');
         const radius = (max ? Math.max : Math.min)(this.width, this.height) / 2;
         const cx = this.width / 2, cy = this.height / 2;
         const band = Math.min(1, Math.max(0, feathering)) * radius;
@@ -422,28 +443,32 @@ export class Image {
     }
     opacity(opacity, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(opacity) || opacity < 0)
+        opacity = finite(opacity, 'opacity value');
+        if (opacity < 0)
             throw new RangeError('Invalid opacity value');
         this.__set_channel_value__(opacity, absolute, 3);
         return this;
     }
     red(factor, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(factor) || factor < 0)
+        factor = finite(factor, 'red factor');
+        if (factor < 0)
             throw new RangeError('Invalid red factor');
         this.__set_channel_value__(factor, absolute, 0);
         return this;
     }
     green(factor, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(factor) || factor < 0)
+        factor = finite(factor, 'green factor');
+        if (factor < 0)
             throw new RangeError('Invalid green factor');
         this.__set_channel_value__(factor, absolute, 1);
         return this;
     }
     blue(factor, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(factor) || factor < 0)
+        factor = finite(factor, 'blue factor');
+        if (factor < 0)
             throw new RangeError('Invalid blue factor');
         this.__set_channel_value__(factor, absolute, 2);
         return this;
@@ -454,13 +479,15 @@ export class Image {
     }
     lightness(value, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(value) || value < 0)
+        value = finite(value, 'lightness value');
+        if (value < 0)
             throw new RangeError('Invalid lightness value');
         return this.__map_hsla__(c => { c.l = value * (absolute ? 1 : c.l); });
     }
     saturation(value, absoluteOrOptions = false) {
         const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
-        if (isNaN(value) || value < 0)
+        value = finite(value, 'saturation value');
+        if (value < 0)
             throw new RangeError('Invalid saturation value');
         return this.__map_hsla__(c => { c.s = value * (absolute ? 1 : c.s); });
     }
@@ -468,8 +495,8 @@ export class Image {
         const options = isOptions(xOrOptions) ? xOrOptions : optionsArgument;
         const { opacity = 1, mode = 'normal' } = options;
         let x = isOptions(xOrOptions) ? xOrOptions.x ?? 0 : xOrOptions, y = isOptions(xOrOptions) ? xOrOptions.y ?? 0 : yArgument;
-        x |= 0;
-        y |= 0;
+        x = finite(x, 'x') | 0;
+        y = finite(y, 'y') | 0;
         if (isNaN(opacity) || opacity < 0 || opacity > 1)
             throw new RangeError('Invalid composite opacity');
         const blend = BLEND_MODES[mode];
@@ -555,6 +582,7 @@ export class Image {
         return this;
     }
     hueShift(degrees) {
+        degrees = finite(degrees, 'hue shift');
         return this.__map_hsla__(c => { c.h += degrees / 360; });
     }
     __map_hsla__(map) {
@@ -610,8 +638,10 @@ export class Image {
         return this;
     }
     blur(radius) {
-        if (isNaN(radius) || radius < 0)
+        if (!Number.isFinite(radius) || radius < 0)
             throw new RangeError('Invalid blur radius');
+        if (boxBlurRGBA(this.bitmap, this.width, this.height, radius))
+            return this;
         const pixels = premultiply(this.bitmap);
         gaussianBlur(pixels, this.width, this.height, radius);
         unpremultiply(pixels, this.bitmap);
@@ -619,9 +649,9 @@ export class Image {
     }
     sharpen(amountOrOptions = 1, radiusArgument = 1) {
         const { amount = 1, radius = 1 } = isOptions(amountOrOptions) ? amountOrOptions : { amount: amountOrOptions, radius: radiusArgument };
-        if (isNaN(amount) || amount < 0)
+        if (!Number.isFinite(amount) || amount < 0)
             throw new RangeError('Invalid sharpen amount');
-        if (isNaN(radius) || radius <= 0)
+        if (!Number.isFinite(radius) || radius <= 0)
             throw new RangeError('Invalid sharpen radius');
         const blurred = premultiply(this.bitmap);
         gaussianBlur(blurred, this.width, this.height, radius);
@@ -638,17 +668,20 @@ export class Image {
         return this;
     }
     brightness(factor) {
-        if (isNaN(factor) || factor < 0)
+        factor = finite(factor, 'brightness factor');
+        if (factor < 0)
             throw new RangeError('Invalid brightness factor');
         return this.__map_channels__(v => v * factor);
     }
     contrast(factor) {
-        if (isNaN(factor) || factor < 0)
+        factor = finite(factor, 'contrast factor');
+        if (factor < 0)
             throw new RangeError('Invalid contrast factor');
         return this.__map_channels__(v => (v - 127.5) * factor + 127.5);
     }
     gamma(gamma) {
-        if (isNaN(gamma) || gamma <= 0)
+        gamma = finite(gamma, 'gamma');
+        if (gamma <= 0)
             throw new RangeError('Invalid gamma');
         return this.__map_channels__(v => 255 * (v / 255) ** (1 / gamma));
     }
@@ -673,6 +706,8 @@ export class Image {
         if (!(transparencyThreshold >= 0 && opacityThreshold <= 1 && transparencyThreshold < opacityThreshold))
             throw new RangeError('Invalid thresholds, they have to satisfy 0 <= transparencyThreshold < opacityThreshold <= 1');
         const bitmap = this.bitmap;
+        if (color !== undefined)
+            color = checkColor(color);
         const c = color === undefined ? [bitmap[0], bitmap[1], bitmap[2]] : [color >>> 24, color >> 16 & 255, color >> 8 & 255];
         for (let i = 0; i < bitmap.length; i += 4) {
             let distance = 0;
@@ -726,8 +761,8 @@ export class Image {
         return color ? Image.rgbToColor(...color) : Image.rgbaToColor(0, 0, 0, 0xff);
     }
     rotate(angle, resizeOrOptions = true) {
-        const { resize = true } = typeof resizeOrOptions === 'object' && resizeOrOptions !== null ? resizeOrOptions : { resize: resizeOrOptions };
-        angle = ((angle % 360) + 360) % 360;
+        const { resize = true, fast = true } = typeof resizeOrOptions === 'object' && resizeOrOptions !== null ? resizeOrOptions : { resize: resizeOrOptions };
+        angle = ((finite(angle, 'angle') % 360) + 360) % 360;
         if (angle === 0)
             return this;
         const { width, height } = this;
@@ -752,6 +787,8 @@ export class Image {
         const outWidth = resize ? Math.round(Math.abs(width * cos) + Math.abs(height * sin)) : width;
         const outHeight = resize ? Math.round(Math.abs(width * sin) + Math.abs(height * cos)) : height;
         const out = new Image(outWidth, outHeight);
+        if (fast && rotateBilinear(this.bitmap, width, height, out.bitmap, outWidth, outHeight, sin, cos))
+            return this.__apply__(out);
         const s8 = this.bitmap, d8 = out.bitmap;
         for (let oy = 0; oy < outHeight; oy++) {
             for (let ox = 0; ox < outWidth; ox++) {
@@ -837,8 +874,8 @@ export class Image {
     }
     static gradient(colors) {
         const entries = Object.entries(colors).sort((a, b) => Number(a[0]) - Number(b[0]));
-        const positions = entries.map(e => parseFloat(e[0]));
-        const values = entries.map(e => e[1]);
+        const positions = entries.map(e => finite(parseFloat(e[0]), 'gradient position'));
+        const values = entries.map(e => checkColor(e[1]));
         if (positions.length === 0)
             throw new RangeError('Invalid gradient point count');
         else if (positions.length === 1) {
@@ -858,10 +895,10 @@ export class Image {
         const maxDef = Math.max(...positions);
         const gradients = [];
         for (let i = 0; i < positions.length; i++) {
-            let minPos = positions[i - 1];
+            const minPos = positions[i - 1];
             if (minPos === undefined)
                 continue;
-            let maxPos = positions[i];
+            const maxPos = positions[i];
             let minVal = values[i - 1];
             if (minVal === undefined)
                 minVal = values[i];
@@ -882,6 +919,7 @@ export class Image {
     }
     roundCorners(radiusOrOptions) {
         let radius = (isOptions(radiusOrOptions) ? radiusOrOptions.radius : radiusOrOptions) ?? Math.min(this.width, this.height) / 4;
+        radius = finite(radius, 'radius');
         radius = Math.max(0, Math.min(radius, this.width / 2, this.height / 2));
         const size = Math.ceil(radius);
         for (let y = 0; y < size; y++) {
@@ -914,7 +952,7 @@ export class Image {
         };
     }
     fisheye(strengthOrOptions) {
-        const strength = (isOptions(strengthOrOptions) ? strengthOrOptions.strength : strengthOrOptions) ?? 2;
+        const strength = finite((isOptions(strengthOrOptions) ? strengthOrOptions.strength : strengthOrOptions) ?? 2, 'strength');
         const r = new Image(this.width, this.height);
         const w = this.width;
         const h = this.height;
@@ -947,7 +985,7 @@ export class Image {
             ({ compression = 1, metadata = {} } = compressionOrOptions);
         else
             metadata = compressionOrOptions;
-        const level = Math.min(9, Math.max(0, ~~compression));
+        const level = Math.min(9, Math.max(0, ~~finite(compression, 'compression level')));
         return png.encodeRGBA(this.__bytes__(), this.width, this.height, level, pngText(resolveMetadata(metadata)));
     }
     encodePNG(compressionOrOptions, metadata) {
@@ -956,7 +994,7 @@ export class Image {
     async encodeJPEG(qualityOrOptions = 90) {
         const { quality = 90, metadata = {} } = isOptions(qualityOrOptions) ? qualityOrOptions : { quality: qualityOrOptions };
         const m = resolveMetadata(metadata);
-        return jpeg.encode(this.__bytes__(), this.width, this.height, quality, { exif: exifData(m), comment: m.comment ? utf8(m.comment) : undefined });
+        return jpeg.encode(this.__bytes__(), this.width, this.height, finite(quality, 'quality'), { exif: exifData(m), comment: m.comment ? utf8(m.comment) : undefined });
     }
     async encodeWebP({ metadata = {} } = {}) {
         return webp.encode(this.__bytes__(), this.width, this.height, exifData(resolveMetadata(metadata)));
@@ -966,27 +1004,27 @@ export class Image {
         return tga.encode(this.__bytes__(), this.width, this.height, { author, comment, time, software });
     }
     static async decode(input, options = {}) {
-        const { applyOrientation = true } = options;
+        const { applyOrientation = true, maxPixels = MAX_PIXELS } = options;
         const data = view(input);
         const dataView = new DataView(data.buffer, data.byteOffset, data.byteLength);
-        let decoded;
-        if (ImageType.isPNG(dataView))
-            decoded = await png.decode(data);
-        else if (ImageType.isJPEG(dataView))
-            decoded = jpeg.decode(data);
-        else if (ImageType.isTIFF(dataView))
-            decoded = await tiff.decode(data);
-        else if (ImageType.isWebP(dataView)) {
-            if (webp.isAnimated(data))
-                throw new Error('Animated WebPs have to be decoded with Animation.decode()');
-            decoded = webp.decode(data);
-        }
-        else if (ImageType.isTGA(dataView))
-            decoded = tga.decode(data);
-        else
+        const decoded = await decoding(() => {
+            if (ImageType.isPNG(dataView))
+                return png.decode(data, maxPixels);
+            if (ImageType.isJPEG(dataView))
+                return jpeg.decode(data, { maxPixels });
+            if (ImageType.isTIFF(dataView))
+                return tiff.decode(data, maxPixels);
+            if (ImageType.isWebP(dataView)) {
+                if (webp.isAnimated(data))
+                    throw new Error('Animated WebPs have to be decoded with Animation.decode()');
+                return webp.decode(data, maxPixels);
+            }
+            if (ImageType.isTGA(dataView))
+                return tga.decode(data, maxPixels);
             throw new Error('Unsupported image type');
+        });
         const image = new Image(decoded.width, decoded.height);
-        image.bitmap.set(decoded.pixels);
+        image.bitmap = decoded.pixels;
         return applyOrientation && decoded.orientation ? image.__orient__(decoded.orientation) : image;
     }
     __orient__(orientation) {
@@ -1060,39 +1098,67 @@ export class Image {
     static async renderText(font, size, text, colorOrOptions = 0xffffffff, layoutArgument, styleArgument = {}) {
         const options = isOptions(colorOrOptions) ? colorOrOptions : { ...styleArgument, color: colorOrOptions, layout: layoutArgument };
         const { color = 0xffffffff, layout = new TextLayout(), strokeWidth = 0, strokeColor = 0x000000ff, hinting = true } = options;
-        if (isNaN(strokeWidth) || strokeWidth < 0)
+        size = finite(size, 'font size');
+        if (finite(strokeWidth, 'stroke width') < 0)
             throw new RangeError('Invalid stroke width');
-        const rendered = textRenderer.render(view(font), size, text, layout, hinting);
+        const fonts = Array.isArray(font) ? font : [font];
+        if (!fonts.length)
+            throw new RangeError('No font given');
         const [r, g, b, a] = Image.colorToRGBA(color);
+        const rendered = await textRenderer.render(fonts.map(view), size, text, layout, hinting, (r << 24 | g << 16 | b << 8 | 255) >>> 0);
         const pad = Math.ceil(strokeWidth);
         const width = rendered.width + 2 * pad, height = rendered.height + 2 * pad;
         const coverage = new Uint8Array(width * height);
         for (let y = 0; y < rendered.height; y++)
             coverage.set(rendered.coverage.subarray(y * rendered.width, (y + 1) * rendered.width), (y + pad) * width + pad);
+        let colored = null;
+        if (rendered.color) {
+            colored = new Uint8ClampedArray(width * height * 4);
+            for (let y = 0; y < rendered.height; y++)
+                colored.set(rendered.color.subarray(y * rendered.width * 4, (y + 1) * rendered.width * 4), ((y + pad) * width + pad) * 4);
+        }
         const image = new Image(width, height);
         const bitmap = image.bitmap;
-        if (!strokeWidth) {
-            for (let i = 0; i < coverage.length; i++) {
-                if (!coverage[i])
-                    continue;
-                bitmap[i * 4] = r;
-                bitmap[i * 4 + 1] = g;
-                bitmap[i * 4 + 2] = b;
-                bitmap[i * 4 + 3] = coverage[i] * a / 255;
-            }
+        if (!strokeWidth && !colored) {
+            const pixels = new Uint32Array(bitmap.buffer, bitmap.byteOffset, bitmap.length >> 2), lut = new Uint32Array(256);
+            const bytes = new Uint8ClampedArray(lut.buffer);
+            for (let v = 1; v < 256; v++)
+                bytes.set([r, g, b, v * a / 255], v * 4);
+            for (let i = 0; i < coverage.length; i++)
+                if (coverage[i])
+                    pixels[i] = lut[coverage[i]];
             return image;
         }
-        const stroke = outline(coverage, width, height, strokeWidth);
+        let shape = coverage;
+        if (colored) {
+            shape = coverage.slice();
+            for (let i = 0; i < shape.length; i++)
+                shape[i] = Math.max(shape[i], colored[i * 4 + 3]);
+        }
+        const stroke = strokeWidth ? outline(shape, width, height, strokeWidth) : null;
         const [sr, sg, sb, sa] = Image.colorToRGBA(strokeColor);
         for (let i = 0; i < coverage.length; i++) {
-            const af = coverage[i] / 255 * a / 255, as = stroke[i] * sa / 255;
-            const ao = af + as * (1 - af);
-            if (ao <= 0)
+            let af = coverage[i] / 255 * a / 255, pr = r * af, pg = g * af, pb = b * af;
+            if (colored && colored[i * 4 + 3]) {
+                const ca = colored[i * 4 + 3] / 255 * a / 255, keep = 1 - ca, f = a / 255;
+                pr = colored[i * 4] * f + pr * keep;
+                pg = colored[i * 4 + 1] * f + pg * keep;
+                pb = colored[i * 4 + 2] * f + pb * keep;
+                af = ca + af * keep;
+            }
+            if (stroke) {
+                const as = stroke[i] * sa / 255 * (1 - shape[i] / 255);
+                pr += sr * as;
+                pg += sg * as;
+                pb += sb * as;
+                af += as;
+            }
+            if (af <= 0)
                 continue;
-            bitmap[i * 4] = (r * af + sr * as * (1 - af)) / ao;
-            bitmap[i * 4 + 1] = (g * af + sg * as * (1 - af)) / ao;
-            bitmap[i * 4 + 2] = (b * af + sb * as * (1 - af)) / ao;
-            bitmap[i * 4 + 3] = ao * 255;
+            bitmap[i * 4] = pr / af;
+            bitmap[i * 4 + 1] = pg / af;
+            bitmap[i * 4 + 2] = pb / af;
+            bitmap[i * 4 + 3] = af * 255;
         }
         return image;
     }
@@ -1134,8 +1200,9 @@ function hue2rgb(p, q, t) {
         return p + (q - p) * (2 / 3 - t) * 6;
     return p;
 }
-function resizeMode(modeOrOptions) {
-    return (isOptions(modeOrOptions) ? modeOrOptions.mode : modeOrOptions) ?? Image.RESIZE_BILINEAR;
+function resizeOptions(modeOrOptions) {
+    const options = isOptions(modeOrOptions) ? modeOrOptions : { mode: modeOrOptions };
+    return { mode: options.mode ?? Image.RESIZE_BILINEAR, fast: options.fast ?? true };
 }
 const hardLight = (b, s) => s <= 0.5 ? b * 2 * s : 1 - (1 - b) * (1 - (2 * s - 1));
 const BLEND_MODES = {
@@ -1158,37 +1225,80 @@ const BLEND_MODES = {
     'exclusion': (b, s) => b + s - 2 * b * s,
     'add': (b, s) => Math.min(1, b + s)
 };
+const OUTLINE_WINDOW = 1;
 function outline(coverage, width, height, radius) {
     const count = width * height;
     const distance = new Float64Array(count);
     for (let i = 0; i < count; i++)
         distance[i] = coverage[i] >= 128 ? 0 : Infinity;
+    const nearestY = new Int32Array(count), nearestX = new Int32Array(count);
     const size = Math.max(width, height);
-    const line = new Float64Array(size), result = new Float64Array(size);
+    const line = new Float64Array(size), result = new Float64Array(size), nearest = new Int32Array(size);
     const parabolas = new Int32Array(size), bounds = new Float64Array(size + 1);
     for (let x = 0; x < width; x++) {
         for (let y = 0; y < height; y++)
             line[y] = distance[y * width + x];
-        distanceTransform(line, height, result, parabolas, bounds);
-        for (let y = 0; y < height; y++)
+        distanceTransform(line, height, result, parabolas, bounds, nearest);
+        for (let y = 0; y < height; y++) {
             distance[y * width + x] = result[y];
+            nearestY[y * width + x] = nearest[y];
+        }
     }
+    const far = (radius + 2) ** 2;
     for (let y = 0; y < height; y++) {
         const row = y * width;
         for (let x = 0; x < width; x++)
-            line[x] = distance[row + x];
-        distanceTransform(line, width, result, parabolas, bounds);
-        for (let x = 0; x < width; x++)
+            line[x] = distance[row + x] < far ? distance[row + x] : Infinity;
+        distanceTransform(line, width, result, parabolas, bounds, nearest);
+        for (let x = 0; x < width; x++) {
             distance[row + x] = result[x];
+            nearestX[row + x] = nearest[x];
+        }
     }
+    const pointX = new Float32Array(count), pointY = new Float32Array(count), isEdge = new Uint8Array(count);
+    for (let y = 1; y < height - 1; y++)
+        for (let x = 1, e = y * width + 1; x < width - 1; x++, e++) {
+            const c = coverage[e];
+            if (!c || c === 255 && coverage[e - 1] >= 128 && coverage[e + 1] >= 128 && coverage[e - width] >= 128 && coverage[e + width] >= 128)
+                continue;
+            const above = e - width, below = e + width;
+            const gx = coverage[above + 1] + 2 * coverage[e + 1] + coverage[below + 1] - coverage[above - 1] - 2 * coverage[e - 1] - coverage[below - 1];
+            const gy = coverage[below - 1] + 2 * coverage[below] + coverage[below + 1] - coverage[above - 1] - 2 * coverage[above] - coverage[above + 1];
+            const length = Math.sqrt(gx * gx + gy * gy);
+            if (!length)
+                continue;
+            const outside = 0.5 - c / 255;
+            pointX[e] = x + outside * gx / length;
+            pointY[e] = y + outside * gy / length;
+            isEdge[e] = 1;
+        }
     const out = new Float32Array(count);
-    for (let i = 0; i < count; i++) {
-        const d = Math.sqrt(distance[i]);
-        out[i] = Math.max(coverage[i] / 255, Math.min(1, Math.max(0, radius + 0.5 - d)));
-    }
+    const inner = radius - 1.5, near = inner > 0 ? inner * inner : -1;
+    for (let y = 0, i = 0; y < height; y++)
+        for (let x = 0; x < width; x++, i++) {
+            const d2 = distance[i];
+            if (d2 <= near)
+                out[i] = 1;
+            if (d2 <= near || d2 >= far) {
+                if (d2 >= far)
+                    out[i] = coverage[i] / 255;
+                continue;
+            }
+            const qx = nearestX[i], qy = nearestY[y * width + qx];
+            let closest = Infinity;
+            for (let wy = Math.max(0, qy - OUTLINE_WINDOW); wy <= Math.min(height - 1, qy + OUTLINE_WINDOW); wy++)
+                for (let wx = Math.max(0, qx - OUTLINE_WINDOW), e = wy * width + wx; wx <= Math.min(width - 1, qx + OUTLINE_WINDOW); wx++, e++) {
+                    if (!isEdge[e])
+                        continue;
+                    const ex = x - pointX[e], ey = y - pointY[e];
+                    closest = Math.min(closest, ex * ex + ey * ey);
+                }
+            closest = closest === Infinity ? Math.sqrt(d2) - 0.5 : Math.sqrt(closest);
+            out[i] = Math.max(coverage[i] / 255, Math.min(1, Math.max(0, radius + 0.5 - closest)));
+        }
     return out;
 }
-function distanceTransform(f, n, d, v, z) {
+function distanceTransform(f, n, d, v, z, nearest) {
     let k = -1;
     for (let q = 0; q < n; q++) {
         if (f[q] === Infinity)
@@ -1213,5 +1323,6 @@ function distanceTransform(f, n, d, v, z) {
         while (z[j + 1] < q)
             j++;
         d[q] = (q - v[j]) ** 2 + f[v[j]];
+        nearest[q] = v[j];
     }
 }