imagescript 3.1.0 → 3.2.0

package/dist/image.js

@@ -9,9 +9,11 @@ import * as svgRenderer from "./render/svg.js";
 import { view } from "./util/mem.js";
 import { ImageType } from "./image-type.js";
 import { TextLayout } from "./text-layout.js";
-import { VERSION } from "./version.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";
 export class Image {
     __width__;
     __height__;
@@ -206,8 +208,8 @@ export class Image {
     static get RESIZE_AUTO() {
         return -1;
     }
-    scale(factor, mode = Image.RESIZE_BILINEAR) {
-        const image = this.__scale__(factor, mode);
+    scale(factor, modeOrOptions) {
+        const image = this.__scale__(factor, resizeMode(modeOrOptions));
         return this.__apply__(image);
     }
     __scale__(factor, mode = Image.RESIZE_BILINEAR) {
@@ -215,23 +217,27 @@ export class Image {
             return this;
         return this.__resize__(this.width * factor, this.height * factor, mode);
     }
-    resize(width, height, mode = Image.RESIZE_BILINEAR) {
+    resize(width, height, modeOrOptions) {
+        const mode = resizeMode(modeOrOptions);
         const image = this.__resize__(width, height, mode);
         return this.__apply__(image);
     }
-    contain(width, height, mode = Image.RESIZE_BILINEAR) {
+    contain(width, height, modeOrOptions) {
+        const mode = resizeMode(modeOrOptions);
         width = Math.floor(width);
         height = Math.floor(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);
     }
-    fit(width, height, mode = Image.RESIZE_BILINEAR) {
+    fit(width, height, modeOrOptions) {
+        const mode = resizeMode(modeOrOptions);
         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);
     }
-    cover(width, height, mode = Image.RESIZE_BILINEAR) {
+    cover(width, height, modeOrOptions) {
+        const mode = resizeMode(modeOrOptions);
         width = Math.floor(width);
         height = Math.floor(height);
         const scale = Math.max(width / this.width, height / this.height);
@@ -282,6 +288,51 @@ export class Image {
             throw new RangeError('Crop region does not overlap the image');
         return this.__apply__(this.__crop__(left, top, right - left, bottom - top));
     }
+    trim(color, options = {}) {
+        const bounds = this.__trim_bounds__(color, options);
+        return bounds ? this.__apply__(this.__crop__(...bounds)) : this;
+    }
+    __trim_bounds__(color, { tolerance = 0 }) {
+        if (!(tolerance >= 0 && tolerance <= 1))
+            throw new RangeError('Invalid tolerance, it has to be between 0 and 1');
+        const bitmap = this.bitmap;
+        const { width, height } = this;
+        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) => {
+            const i = (y * width + x) * 4;
+            if (Math.abs(bitmap[i + 3] - c[3]) > limit)
+                return false;
+            if (bitmap[i + 3] === 0 && c[3] === 0)
+                return true;
+            return Math.abs(bitmap[i] - c[0]) <= limit && Math.abs(bitmap[i + 1] - c[1]) <= limit && Math.abs(bitmap[i + 2] - c[2]) <= limit;
+        };
+        const rowMatches = (y) => {
+            for (let x = 0; x < width; x++)
+                if (!matches(x, y))
+                    return false;
+            return true;
+        };
+        const columnMatches = (x, top, bottom) => {
+            for (let y = top; y < bottom; y++)
+                if (!matches(x, y))
+                    return false;
+            return true;
+        };
+        let top = 0, bottom = height;
+        while (top < height && rowMatches(top))
+            top++;
+        if (top === height)
+            return null;
+        while (rowMatches(bottom - 1))
+            bottom--;
+        let left = 0, right = width;
+        while (columnMatches(left, top, bottom))
+            left++;
+        while (columnMatches(right - 1, top, bottom))
+            right--;
+        return [left, top, right - left, bottom - top];
+    }
     __crop__(x, y, width, height) {
         x = ~~x;
         y = ~~y;
@@ -369,25 +420,29 @@ export class Image {
         }
         return this;
     }
-    opacity(opacity, absolute = false) {
+    opacity(opacity, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(opacity) || opacity < 0)
             throw new RangeError('Invalid opacity value');
         this.__set_channel_value__(opacity, absolute, 3);
         return this;
     }
-    red(factor, absolute = false) {
+    red(factor, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(factor) || factor < 0)
             throw new RangeError('Invalid red factor');
         this.__set_channel_value__(factor, absolute, 0);
         return this;
     }
-    green(factor, absolute = false) {
+    green(factor, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(factor) || factor < 0)
             throw new RangeError('Invalid green factor');
         this.__set_channel_value__(factor, absolute, 1);
         return this;
     }
-    blue(factor, absolute = false) {
+    blue(factor, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(factor) || factor < 0)
             throw new RangeError('Invalid blue factor');
         this.__set_channel_value__(factor, absolute, 2);
@@ -397,18 +452,22 @@ export class Image {
         for (let i = offset; i < this.bitmap.length; i += 4)
             this.bitmap[i] = value * (absolute ? 255 : this.bitmap[i]);
     }
-    lightness(value, absolute = false) {
+    lightness(value, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(value) || value < 0)
             throw new RangeError('Invalid lightness value');
         return this.__map_hsla__(c => { c.l = value * (absolute ? 1 : c.l); });
     }
-    saturation(value, absolute = false) {
+    saturation(value, absoluteOrOptions = false) {
+        const absolute = isOptions(absoluteOrOptions) ? absoluteOrOptions.absolute ?? false : absoluteOrOptions;
         if (isNaN(value) || value < 0)
             throw new RangeError('Invalid saturation value');
         return this.__map_hsla__(c => { c.s = value * (absolute ? 1 : c.s); });
     }
-    composite(source, x = 0, y = 0, options = {}) {
+    composite(source, xOrOptions = 0, yArgument = 0, optionsArgument = {}) {
+        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;
         if (isNaN(opacity) || opacity < 0 || opacity > 1)
@@ -558,7 +617,8 @@ export class Image {
         unpremultiply(pixels, this.bitmap);
         return this;
     }
-    sharpen(amount = 1, radius = 1) {
+    sharpen(amountOrOptions = 1, radiusArgument = 1) {
+        const { amount = 1, radius = 1 } = isOptions(amountOrOptions) ? amountOrOptions : { amount: amountOrOptions, radius: radiusArgument };
         if (isNaN(amount) || amount < 0)
             throw new RangeError('Invalid sharpen amount');
         if (isNaN(radius) || radius <= 0)
@@ -820,7 +880,8 @@ export class Image {
             throw new RangeError(`Invalid gradient position: ${position}`);
         };
     }
-    roundCorners(radius = Math.min(this.width, this.height) / 4) {
+    roundCorners(radiusOrOptions) {
+        let radius = (isOptions(radiusOrOptions) ? radiusOrOptions.radius : radiusOrOptions) ?? Math.min(this.width, this.height) / 4;
         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++) {
@@ -852,7 +913,8 @@ export class Image {
             return (((r & 0xff) << 24) | ((g & 0xff) << 16) | ((b & 0xff) << 8) | (a & 0xff)) >>> 0;
         };
     }
-    fisheye(strength = 2) {
+    fisheye(strengthOrOptions) {
+        const strength = (isOptions(strengthOrOptions) ? strengthOrOptions.strength : strengthOrOptions) ?? 2;
         const r = new Image(this.width, this.height);
         const w = this.width;
         const h = this.height;
@@ -877,37 +939,31 @@ export class Image {
         }
         return this.__apply__(r);
     }
-    async encode(compression = 1, metadata = {}) {
-        if (typeof compression === 'object' && compression !== null) {
-            metadata = compression;
-            compression = 1;
-        }
+    async encode(compressionOrOptions = 1, metadataArgument = {}) {
+        let compression = 1, metadata = metadataArgument;
+        if (!isOptions(compressionOrOptions))
+            compression = compressionOrOptions;
+        else if ('compression' in compressionOrOptions || 'metadata' in compressionOrOptions)
+            ({ compression = 1, metadata = {} } = compressionOrOptions);
+        else
+            metadata = compressionOrOptions;
         const level = Math.min(9, Math.max(0, ~~compression));
-        const { title, author, description, copyright, creationTime, software, disclaimer, warning, source, comment } = metadata || {};
-        return png.encodeRGBA(this.__bytes__(), this.width, this.height, level, {
-            Title: title,
-            Author: author,
-            Description: description,
-            Copyright: copyright,
-            'Creation Time': new Date(creationTime === undefined ? Date.now() : creationTime).toUTCString(),
-            Software: software === undefined ? `github.com/matmen/ImageScript v${VERSION}` : software,
-            Disclaimer: disclaimer,
-            Warning: warning,
-            Source: source,
-            Comment: comment
-        });
-    }
-    encodePNG(compression, metadata) {
-        return this.encode(compression, metadata);
-    }
-    async encodeJPEG(quality = 90) {
-        return jpeg.encode(this.__bytes__(), this.width, this.height, quality);
-    }
-    async encodeWebP() {
-        return webp.encode(this.__bytes__(), this.width, this.height);
-    }
-    async encodeTGA() {
-        return tga.encode(this.__bytes__(), this.width, this.height);
+        return png.encodeRGBA(this.__bytes__(), this.width, this.height, level, pngText(resolveMetadata(metadata)));
+    }
+    encodePNG(compressionOrOptions, metadata) {
+        return this.encode(compressionOrOptions, metadata);
+    }
+    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 });
+    }
+    async encodeWebP({ metadata = {} } = {}) {
+        return webp.encode(this.__bytes__(), this.width, this.height, exifData(resolveMetadata(metadata)));
+    }
+    async encodeTGA({ metadata = {} } = {}) {
+        const { author, comment, creationTime: time, software } = resolveMetadata(metadata);
+        return tga.encode(this.__bytes__(), this.width, this.height, { author, comment, time, software });
     }
     static async decode(input, options = {}) {
         const { applyOrientation = true } = options;
@@ -988,7 +1044,8 @@ export class Image {
     static get SVG_MODE_HEIGHT() {
         return 3;
     }
-    static async renderSVG(svg, size = 1, mode = Image.SVG_MODE_SCALE) {
+    static async renderSVG(svg, sizeOrOptions = 1, modeArgument = Image.SVG_MODE_SCALE) {
+        const { size = 1, mode = Image.SVG_MODE_SCALE } = isOptions(sizeOrOptions) ? sizeOrOptions : { size: sizeOrOptions, mode: modeArgument };
         if (![1, 2, 3].includes(mode))
             throw new Error('Invalid SVG scaling mode');
         if (mode === Image.SVG_MODE_SCALE && size <= 0)
@@ -1000,8 +1057,9 @@ export class Image {
         image.bitmap.set(pixels);
         return image;
     }
-    static async renderText(font, size, text, color = 0xffffffff, layout = new TextLayout(), style = {}) {
-        const { strokeWidth = 0, strokeColor = 0x000000ff, hinting = true } = style;
+    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)
             throw new RangeError('Invalid stroke width');
         const rendered = textRenderer.render(view(font), size, text, layout, hinting);
@@ -1076,6 +1134,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;
+}
 const hardLight = (b, s) => s <= 0.5 ? b * 2 * s : 1 - (1 - b) * (1 - (2 * s - 1));
 const BLEND_MODES = {
     'normal': (_b, s) => s,

package/dist/index.d.ts

@@ -1,18 +1,28 @@
 import { BinaryData } from './util/mem.js';
-import { Image } from './image.js';
+import { Image, DecodeOptions } from './image.js';
 import { GIF } from './gif.js';
-import { Animation } from './animation.js';
+import { Animation, AnimationDecodeOptions } from './animation.js';
 export { Image } from './image.js';
-export type { Color, ColorFunction, ResizeMode, SVGScaleMode, PNGMetadata, TextStyle, DecodeOptions, CompositeOptions, BlendMode, CropCircleOptions, DominantColorOptions, RotateOptions, ColorToAlphaOptions } from './image.js';
+export type { Color, ColorFunction, ResizeMode, SVGScaleMode, PNGMetadata, TextStyle, DecodeOptions, CompositeOptions, BlendMode, CropCircleOptions, DominantColorOptions, RotateOptions, ColorToAlphaOptions, ResizeOptions, AdjustOptions, SharpenOptions, PNGEncodeOptions, JPEGEncodeOptions, EncodeOptions, SVGOptions, TextOptions, RoundCornersOptions, FisheyeOptions, TrimOptions } from './image.js';
 export { Frame } from './frame.js';
-export type { FrameDisposalModeName, FrameDisposalModeId } from './frame.js';
+export type { FrameDisposalModeName, FrameDisposalModeId, FrameOptions } from './frame.js';
 export { GIF } from './gif.js';
 export { Animation } from './animation.js';
+export type { AnimationOptions, AnimationDecodeOptions, AnimationEncodeOptions, GIFEncodeOptions, APNGEncodeOptions } from './animation.js';
 export { TextLayout } from './text-layout.js';
 export type { TextLayoutOptions, WrapStyle, HorizontalAlign, VerticalAlign } from './text-layout.js';
 export { ImageType } from './image-type.js';
 export type { ImageTypeName } from './image-type.js';
 export type { BinaryData } from './util/mem.js';
+export type { Metadata } from './metadata.js';
+/**
+ * Decodes any supported image: GIFs are returned as {@link GIF} (an {@link Animation}), animated WebPs as
+ * {@link Animation}, everything else (including APNGs, as their default image) as {@link Image}.
+ * {@link Animation.decode} decodes the frames of GIFs, APNGs and WebPs
+ * @param data The image data
+ * @param options See {@link AnimationDecodeOptions} (for animations) and {@link DecodeOptions} (for images)
+ */
+export declare function decode(data: BinaryData, options?: AnimationDecodeOptions & DecodeOptions): Promise<GIF | Animation | Image>;
 /**
  * Decodes any supported image: GIFs are returned as {@link GIF} (an {@link Animation}), animated WebPs as
  * {@link Animation}, everything else (including APNGs, as their default image) as {@link Image}.

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Image } from "./image.js";
 import { GIF } from "./gif.js";
 import { Animation } from "./animation.js";
+import { isOptions } from "./util/options.js";
 import * as webp from "./codecs/webp.js";
 import { view } from "./util/mem.js";
 import { ImageType } from "./image-type.js";
@@ -10,11 +11,12 @@ export { GIF } from "./gif.js";
 export { Animation } from "./animation.js";
 export { TextLayout } from "./text-layout.js";
 export { ImageType } from "./image-type.js";
-export function decode(data, onlyExtractFirstFrame = false) {
+export function decode(data, onlyFirstFrameOrOptions = false) {
+    const { onlyFirstFrame = false, applyOrientation } = isOptions(onlyFirstFrameOrOptions) ? onlyFirstFrameOrOptions : { onlyFirstFrame: onlyFirstFrameOrOptions };
     const type = ImageType.getType(data);
     if (type === 'gif')
-        return GIF.decode(data, onlyExtractFirstFrame);
+        return GIF.decode(data, { onlyFirstFrame });
     if (type === 'webp' && webp.isAnimated(view(data)))
-        return Animation.decode(data, onlyExtractFirstFrame);
-    return Image.decode(data);
+        return Animation.decode(data, { onlyFirstFrame });
+    return Image.decode(data, { applyOrientation });
 }

package/dist/metadata.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Metadata written by the encoders. Each format stores the fields it has a place for:
+ *
+ * | Format | Fields |
+ * |---|---|
+ * | PNG, APNG | all (as text chunks) |
+ * | JPEG | author, description, copyright, creation time, software (Exif); comment (comment marker) |
+ * | WebP | author, description, copyright, creation time, software (Exif) |
+ * | GIF | software, comment (comment extensions) |
+ * | TGA | author, comment, creation time, software (extension area) |
+ *
+ * Empty fields are left out
+ */
+export interface Metadata {
+    /** The image's title */
+    title?: string;
+    /** The image's author */
+    author?: string;
+    /** The image's description */
+    description?: string;
+    /** The image's copyright info */
+    copyright?: string;
+    /** The image's creation time. Default: now */
+    creationTime?: string | number | Date;
+    /** The software used to create the image. Default: `'github.com/matmen/ImageScript vX.X.X'`, `''` leaves it out */
+    software?: string;
+    /** A disclaimer for the image */
+    disclaimer?: string;
+    /** A warning for the image */
+    warning?: string;
+    /** The image's source */
+    source?: string;
+    /** A comment for the image */
+    comment?: string;
+}

package/dist/metadata.js

@@ -0,0 +1,43 @@
+import { VERSION } from "./version.js";
+import { encode as utf8 } from "./util/utf8.js";
+import * as exif from "./codecs/exif.js";
+const TEXT_FIELDS = ['title', 'author', 'description', 'copyright', 'software', 'disclaimer', 'warning', 'source', 'comment'];
+export function resolveMetadata(metadata = {}) {
+    const { creationTime, software } = metadata || {};
+    const time = new Date(creationTime === undefined ? Date.now() : creationTime);
+    if (isNaN(time.getTime()))
+        throw new RangeError('Invalid creation time');
+    const resolved = { creationTime: time };
+    for (const key of TEXT_FIELDS) {
+        const value = key === 'software' && software === undefined ? `github.com/matmen/ImageScript v${VERSION}` : metadata?.[key];
+        if (value)
+            resolved[key] = String(value);
+    }
+    return resolved;
+}
+export function pngText(m) {
+    return {
+        Title: m.title,
+        Author: m.author,
+        Description: m.description,
+        Copyright: m.copyright,
+        'Creation Time': m.creationTime.toUTCString(),
+        Software: m.software,
+        Disclaimer: m.disclaimer,
+        Warning: m.warning,
+        Source: m.source,
+        Comment: m.comment
+    };
+}
+export function exifData(m) {
+    return exif.encode({
+        description: m.description,
+        software: m.software,
+        dateTime: m.creationTime,
+        artist: m.author,
+        copyright: m.copyright
+    });
+}
+export function gifComments(m) {
+    return [m.software, m.comment].filter((c) => !!c).map(utf8);
+}

package/dist/render/svg.js

@@ -875,14 +875,25 @@ class Layer {
     width;
     height;
     data;
+    x0 = Infinity;
+    y0 = Infinity;
+    x1 = -Infinity;
+    y1 = -Infinity;
     constructor(width, height) {
         this.width = width;
         this.height = height;
         this.data = new Float32Array(width * height * 4);
     }
+    extend(x0, y0, x1, y1) {
+        this.x0 = Math.min(this.x0, x0);
+        this.y0 = Math.min(this.y0, y0);
+        this.x1 = Math.max(this.x1, x1);
+        this.y1 = Math.max(this.y1, y1);
+    }
     fill({ x0, y0, w, h, data }, paint) {
         const d = this.data;
         const solid = paint.solid;
+        this.extend(x0, y0, x0 + w, y0 + h);
         for (let y = 0; y < h; y++) {
             let i = ((y0 + y) * this.width + x0) * 4;
             for (let x = 0, o = y * w; x < w; x++, o++, i += 4) {
@@ -921,33 +932,40 @@ class Layer {
         }
     }
     composite(layer, opacity, mask) {
+        if (layer.x1 <= layer.x0)
+            return;
+        this.extend(layer.x0, layer.y0, layer.x1, layer.y1);
         const s = layer.data, d = this.data;
-        for (let p = 0, i = 0; p < this.width * this.height; p++, i += 4) {
-            if (s[i + 3] <= 0)
-                continue;
-            const f = mask ? opacity * mask[p] : opacity;
-            if (f <= 0)
-                continue;
-            const a = s[i + 3] * f;
-            const inv = 1 - a;
-            d[i] = s[i] * f + d[i] * inv;
-            d[i + 1] = s[i + 1] * f + d[i + 1] * inv;
-            d[i + 2] = s[i + 2] * f + d[i + 2] * inv;
-            d[i + 3] = a + d[i + 3] * inv;
+        for (let y = layer.y0; y < layer.y1; y++) {
+            for (let p = y * this.width + layer.x0, end = y * this.width + layer.x1, i = p * 4; p < end; p++, i += 4) {
+                if (s[i + 3] <= 0)
+                    continue;
+                const f = mask ? opacity * mask[p] : opacity;
+                if (f <= 0)
+                    continue;
+                const a = s[i + 3] * f;
+                const inv = 1 - a;
+                d[i] = s[i] * f + d[i] * inv;
+                d[i + 1] = s[i + 1] * f + d[i + 1] * inv;
+                d[i + 2] = s[i + 2] * f + d[i + 2] * inv;
+                d[i + 3] = a + d[i + 3] * inv;
+            }
         }
     }
     toRGBA() {
         const out = new Uint8ClampedArray(this.width * this.height * 4);
         const d = this.data;
-        for (let i = 0; i < d.length; i += 4) {
-            const a = d[i + 3];
-            if (a <= 0)
-                continue;
-            const f = a >= 1 ? 255 : 255 / a;
-            out[i] = d[i] * f;
-            out[i + 1] = d[i + 1] * f;
-            out[i + 2] = d[i + 2] * f;
-            out[i + 3] = a * 255;
+        for (let y = this.y0; y < this.y1; y++) {
+            for (let i = (y * this.width + this.x0) * 4, end = (y * this.width + this.x1) * 4; i < end; i += 4) {
+                const a = d[i + 3];
+                if (a <= 0)
+                    continue;
+                const f = a >= 1 ? 255 : 255 / a;
+                out[i] = d[i] * f;
+                out[i + 1] = d[i + 1] * f;
+                out[i + 2] = d[i + 2] * f;
+                out[i + 3] = a * 255;
+            }
         }
         return new Uint8Array(out.buffer);
     }