pixeli 0.1.9 → 1.0.4

package/dist/core/merges/grid/steps/calculateFontSize.js

@@ -0,0 +1,19 @@
+import { requireNonEmptyArray, requireState } from '../../../pipeline/guards.js';
+import { getFontSize } from '../../../utils/fonts/getFontSize.js';
+export const calculateFontSize = async (context, options, _onProgress) => {
+    requireState(context, 'imageWidth');
+    requireState(context, 'captionHeight');
+    if (!context.state.areCaptionsProvided) {
+        return;
+    }
+    requireNonEmptyArray(context.captions, 'captions');
+    const longestCaption = context.captions.reduce((longest, current) => {
+        return current.length > longest.length ? current : longest;
+    });
+    context.state.fontSize = await getFontSize({
+        text: longestCaption,
+        maxWidth: context.state.imageWidth,
+        maxHeight: context.state.captionHeight,
+        initialFontSize: options.maxCaptionSize,
+    });
+};

package/dist/core/merges/grid/steps/calculateImageDimensions.d.ts

@@ -0,0 +1,8 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { GridState } from '../index.js';
+interface Options {
+    imageWidth?: number | undefined;
+    aspectRatio: number;
+}
+export declare const calculateImageDimensions: MergeStep<Options, GridState>;
+export {};

package/dist/core/merges/grid/steps/calculateImageDimensions.js

@@ -0,0 +1,18 @@
+import { MESSAGES } from '../../../modules/messages.js';
+import { MergeError } from '../../../mergeError.js';
+import { getImageWidths } from '../../../utils/images/getImageWidths.js';
+import { trimmedMedian } from '../../../utils/math/trimmedMedian.js';
+import { requireNonEmptyArray } from '../../../pipeline/guards.js';
+export const calculateImageDimensions = async (context, options, _onProgress) => {
+    requireNonEmptyArray(context.images, 'images');
+    // Calculate image width
+    const width = options.imageWidth || trimmedMedian(await getImageWidths(context.images));
+    if (width === null) {
+        throw new MergeError(MESSAGES.ERROR.INTERNAL.message, { type: 'internal', cause: 'trimmedMedian failed' });
+    }
+    // Calculate image height
+    const height = Math.floor(width / options.aspectRatio);
+    // Assign to context
+    context.state.imageWidth = width;
+    context.state.imageHeight = height;
+};

package/dist/core/merges/grid/steps/createComposites.d.ts

@@ -0,0 +1,10 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { GridState } from '../index.js';
+import type { RGBA } from '../../../utils/colors/types.js';
+interface Options {
+    columns: number;
+    gap: number;
+    captionColor: RGBA;
+}
+export declare const createComposites: MergeStep<Options, GridState>;
+export {};

package/dist/core/merges/grid/steps/createComposites.js

@@ -0,0 +1,63 @@
+import { requireNonEmptyArray, requireState } from '../../../pipeline/guards.js';
+import sharp from 'sharp';
+import { createSvgTextBuffer } from '../../../utils/svg/createSvgTextBuffer.js';
+import { rgbaToHex } from '../../../utils/colors/rgbaToHex.js';
+export const createComposites = async (context, options, onProgress) => {
+    requireState(context, 'areCaptionsProvided');
+    requireState(context, 'captionHeight');
+    requireState(context, 'imageWidth');
+    requireState(context, 'imageHeight');
+    requireState(context, 'rows');
+    requireNonEmptyArray(context.images, 'images');
+    // Only needed when there are captions
+    if (context.state.areCaptionsProvided) {
+        requireState(context, 'fontSize');
+    }
+    const composites = [];
+    let x = options.gap;
+    let y = options.gap;
+    for (let row = 0; row < context.state.rows; row++) {
+        for (let col = 0; col < options.columns; col++) {
+            const index = row * options.columns + col;
+            if (index >= context.images.length)
+                break;
+            const image = context.images[index];
+            composites.push({
+                input: await image.toBuffer(),
+                left: x,
+                top: y,
+            });
+            // Add caption if required
+            if (context.state.areCaptionsProvided) {
+                // Create text
+                const svgBuffer = createSvgTextBuffer({
+                    text: context.captions[index],
+                    maxWidth: context.state.imageWidth,
+                    maxHeight: context.state.captionHeight,
+                    fontSize: context.state.fontSize,
+                    fill: rgbaToHex(options.captionColor),
+                });
+                // Add text to composites
+                composites.push({
+                    input: svgBuffer,
+                    left: x,
+                    top: y + context.state.imageHeight,
+                });
+            }
+            // Update coordinates
+            x += context.state.imageWidth + options.gap;
+            // Call onProgress
+            if (onProgress) {
+                context.progressInfo.completed += 1;
+                context.progressInfo.phase = 'Merging images';
+                onProgress({ ...context.progressInfo });
+            }
+        }
+        // Update coordinates
+        y += context.state.areCaptionsProvided
+            ? context.state.imageHeight + options.gap + context.state.captionHeight
+            : context.state.imageHeight + options.gap;
+        x = options.gap;
+    }
+    context.composites = composites;
+};

package/dist/core/merges/grid/steps/prepareImages.d.ts

@@ -0,0 +1,10 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { GridState } from '../index.js';
+import type { RGBA } from '../../../utils/colors/types.js';
+interface Options {
+    cornerRadius: number;
+    borderWidth: number;
+    borderColor: RGBA;
+}
+export declare const prepareImages: MergeStep<Options, GridState>;
+export {};

package/dist/core/merges/grid/steps/prepareImages.js

@@ -0,0 +1,29 @@
+import { scaleImage } from '../../../utils/images/scaleImage.js';
+import { requireNonEmptyArray, requireState } from '../../../pipeline/guards.js';
+import { handleImageEdges } from '../../../utils/images/handleImageEdges.js';
+export const prepareImages = async (context, options, _onProgress) => {
+    requireState(context, 'imageWidth');
+    requireState(context, 'imageHeight');
+    requireNonEmptyArray(context.images, 'images');
+    // Get values from context and options
+    const width = context.state.imageWidth;
+    const height = context.state.imageHeight;
+    const cornerRadius = options.cornerRadius;
+    for (let i = 0; i < context.images.length; i++) {
+        const image = context.images[i];
+        // Resize image
+        const resizedImage = await scaleImage(image, { width, height });
+        // Handle borders and corner rounding
+        const borderedImage = await handleImageEdges(resizedImage, {
+            imageWidth: width,
+            imageHeight: height,
+            borderWidth: options.borderWidth,
+            borderHeight: options.borderWidth,
+            borderColor: options.borderColor,
+            cornerRadius,
+            finalizePipeline: true,
+        });
+        // Update context
+        context.images[i] = borderedImage;
+    }
+};

package/dist/core/merges/grid/steps/shuffleImagesAndCaptions.d.ts

@@ -0,0 +1,7 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { GridState } from '../index.js';
+interface Options {
+    shuffle: boolean;
+}
+export declare const shuffleImagesAndCaptions: MergeStep<Options, GridState>;
+export {};

package/dist/core/merges/grid/steps/shuffleImagesAndCaptions.js

@@ -0,0 +1,17 @@
+import { shuffleArray, shuffleTogether } from '../../../helpers.js';
+import { requireNonEmptyArray, requireState } from '../../../pipeline/guards.js';
+export const shuffleImagesAndCaptions = async (context, options, _onProgress) => {
+    requireState(context, 'areCaptionsProvided');
+    requireNonEmptyArray(context.images, 'images');
+    // If captions are given and shuffle is true
+    if (context.state.areCaptionsProvided && options.shuffle) {
+        const [shuffledImages, shuffledCaptions] = shuffleTogether(context.images, context.captions);
+        context.images = shuffledImages;
+        context.captions = shuffledCaptions;
+    }
+    // If there are no captions but shuffle is true
+    else if (!context.state.areCaptionsProvided && options.shuffle) {
+        const shuffledImages = shuffleArray(context.images);
+        context.images = shuffledImages;
+    }
+};

package/dist/core/merges/index.d.ts

@@ -0,0 +1,5 @@
+export { gridMerge } from './grid/index.js';
+export { masonryMerge } from './masonry/index.js';
+export { templateMerge } from './template/index.js';
+export { collageMerge } from './collage/index.js';
+export type { GridMergeOptions, MasonryMergeOptions, TemplateMergeOptions, CollageMergeOptions } from './types.js';

package/dist/core/merges/index.js

@@ -0,0 +1,4 @@
+export { gridMerge } from './grid/index.js';
+export { masonryMerge } from './masonry/index.js';
+export { templateMerge } from './template/index.js';
+export { collageMerge } from './collage/index.js';

package/dist/core/merges/masonry/index.d.ts

@@ -0,0 +1,10 @@
+import type { MasonryMerge } from '../types.js';
+import type sharp from 'sharp';
+export interface MasonryState {
+    rowHeight: number;
+    columnWidth: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    lanes: sharp.Sharp[][];
+}
+export declare const masonryMerge: MasonryMerge;

package/dist/core/merges/masonry/index.js

@@ -0,0 +1,32 @@
+import { MergePipeline } from '../../pipeline/mergePipeline.js';
+import { masonrySchema } from '../../schemas/masonry.js';
+import { loadImages } from '../shared-steps/loadImages.js';
+import { createCanvas } from '../shared-steps/createCanvas.js';
+import { applyComposites } from '../shared-steps/applyComposites.js';
+import { exportCanvas } from '../shared-steps/exportCanvas.js';
+import { calculateLaneSize } from './steps/calculateLaneSize.js';
+import { resizeImages } from './steps/resizeImages.js';
+import { splitIntoLanes } from './steps/splitIntoLanes.js';
+import { calculateCanvasDimensions } from './steps/calculateCanvasDimensions.js';
+import { createComposites } from './steps/createComposites.js';
+export const masonryMerge = async (imageInputs, options, onProgress) => {
+    const context = {
+        inputs: imageInputs,
+        captions: [],
+        composites: [],
+        images: [],
+        state: {},
+    };
+    const masonryMergePipeline = await MergePipeline.createPipeline(masonrySchema, options, context, onProgress);
+    masonryMergePipeline
+        .use(loadImages)
+        .use(calculateLaneSize)
+        .use(resizeImages)
+        .use(splitIntoLanes)
+        .use(calculateCanvasDimensions)
+        .use(createCanvas)
+        .use(createComposites)
+        .use(applyComposites)
+        .use(exportCanvas);
+    return await masonryMergePipeline.run();
+};

package/dist/core/merges/masonry/steps/calculateCanvasDimensions.d.ts

@@ -0,0 +1,15 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { MasonryState } from '../index.js';
+interface HorizontalOptions {
+    flow: 'horizontal';
+    gap: number;
+    canvasWidth: number;
+}
+interface VerticalOptions {
+    flow: 'vertical';
+    gap: number;
+    canvasHeight: number;
+}
+type Options = HorizontalOptions | VerticalOptions;
+export declare const calculateCanvasDimensions: MergeStep<Options, MasonryState>;
+export {};

package/dist/core/merges/masonry/steps/calculateCanvasDimensions.js

@@ -0,0 +1,17 @@
+import { requireState } from '../../../pipeline/guards.js';
+export const calculateCanvasDimensions = async (context, options, _onProgress) => {
+    // Mandatory regardless of flow
+    requireState(context, 'lanes');
+    // Put both canvas width and height in context state
+    const totalLanes = context.state.lanes.length;
+    if (options.flow === 'horizontal') {
+        requireState(context, 'rowHeight');
+        context.state.canvasWidth = options.canvasWidth;
+        context.state.canvasHeight = totalLanes * context.state.rowHeight + (totalLanes + 1) * options.gap;
+    }
+    else {
+        requireState(context, 'columnWidth');
+        context.state.canvasHeight = options.canvasHeight;
+        context.state.canvasWidth = totalLanes * context.state.columnWidth + (totalLanes + 1) * options.gap;
+    }
+};

package/dist/core/merges/masonry/steps/calculateLaneSize.d.ts

@@ -0,0 +1,9 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { MasonryState } from '../index.js';
+interface Options {
+    rowHeight?: number | undefined;
+    columnWidth?: number | undefined;
+    flow: 'horizontal' | 'vertical';
+}
+export declare const calculateLaneSize: MergeStep<Options, MasonryState>;
+export {};

package/dist/core/merges/masonry/steps/calculateLaneSize.js

@@ -0,0 +1,27 @@
+import { trimmedMedian } from '../../../utils/math/trimmedMedian.js';
+import { getImageWidths } from '../../../utils/images/getImageWidths.js';
+import { getImageHeights } from '../../../utils/images/getImageHeights.js';
+import { MESSAGES } from '../../../modules/messages.js';
+import { MergeError } from '../../../mergeError.js';
+import { requireNonEmptyArray } from '../../../pipeline/guards.js';
+export const calculateLaneSize = async (context, options, _onProgress) => {
+    requireNonEmptyArray(context.images, 'images');
+    if (options.flow === 'horizontal') {
+        // Calculate rowHeight
+        const rowHeight = options.rowHeight || trimmedMedian(await getImageHeights(context.images));
+        if (rowHeight === null) {
+            throw new MergeError(MESSAGES.ERROR.INTERNAL.message, { type: 'internal', cause: 'trimmedMedian failed' });
+        }
+        // Set rowHeight
+        context.state.rowHeight = rowHeight;
+    }
+    else {
+        // Calculate columnWidth
+        const columnWidth = options.columnWidth || trimmedMedian(await getImageWidths(context.images));
+        if (columnWidth === null) {
+            throw new MergeError(MESSAGES.ERROR.INTERNAL.message, { type: 'internal', cause: 'trimmedMedian failed' });
+        }
+        // Set columnWidth
+        context.state.columnWidth = columnWidth;
+    }
+};

package/dist/core/merges/masonry/steps/createComposites.d.ts

@@ -0,0 +1,25 @@
+import type { MasonryState } from '../index.js';
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { RGBA } from '../../../utils/colors/types.js';
+interface BaseOptions {
+    flow: 'horizontal' | 'vertical';
+    gap: number;
+    cornerRadius: number;
+    borderWidth: number;
+    borderColor: RGBA;
+}
+interface HorizontalOptions extends BaseOptions {
+    flow: 'horizontal';
+    gap: number;
+    canvasWidth: number;
+    hAlign: 'justified' | 'left' | 'center' | 'right';
+}
+interface VerticalOptions extends BaseOptions {
+    flow: 'vertical';
+    gap: number;
+    canvasHeight: number;
+    vAlign: 'justified' | 'top' | 'middle' | 'bottom';
+}
+type Options = HorizontalOptions | VerticalOptions;
+export declare const createComposites: MergeStep<Options, MasonryState>;
+export {};

package/dist/core/merges/masonry/steps/createComposites.js

@@ -0,0 +1,108 @@
+import sharp from 'sharp';
+import { requireState } from '../../../pipeline/guards.js';
+import { handleImageEdges } from '../../../utils/images/handleImageEdges.js';
+// |----------------------|
+// |----------------------|
+// | ROW OFFSET FUNCTION |
+// |----------------------|
+// |----------------------|
+const computeOffset = async (flow, lane, canvasSize, gap, alignment) => {
+    // Calculate total row width
+    let totalLaneLength = gap * (lane.length + 1);
+    for (const im of lane) {
+        const meta = await im.metadata();
+        totalLaneLength += flow === 'horizontal' ? meta.width : meta.height;
+    }
+    // Get x offset
+    switch (alignment) {
+        case 'justified':
+        case 'left':
+        case 'top':
+            return gap;
+        case 'right':
+        case 'bottom':
+            return canvasSize - totalLaneLength + gap;
+        case 'middle':
+        case 'center':
+            const canvasGap = gap * 2;
+            return Math.floor((canvasSize + canvasGap - totalLaneLength) / 2);
+    }
+};
+const horizontalAxis = {
+    flow: 'horizontal',
+    getPrimary: (meta) => meta.width,
+    getCross: (meta) => meta.height,
+    crop: (meta, overflow) => ({
+        width: meta.width - overflow,
+        height: meta.height,
+        fit: 'cover',
+    }),
+};
+const verticalAxis = {
+    flow: 'vertical',
+    getPrimary: (meta) => meta.height,
+    getCross: (meta) => meta.width,
+    crop: (meta, overflow) => ({
+        width: meta.width,
+        height: meta.height - overflow,
+        fit: 'cover',
+    }),
+};
+export const createComposites = async (context, options, onProgress) => {
+    // Require needed states
+    requireState(context, 'lanes');
+    options.flow === 'horizontal' ? requireState(context, 'rowHeight') : requireState(context, 'columnWidth');
+    // Initialize flow-dependent values
+    const laneCrossSize = options.flow === 'horizontal' ? context.state.rowHeight : context.state.columnWidth;
+    const axis = options.flow === 'horizontal' ? horizontalAxis : verticalAxis;
+    const alignment = options.flow === 'horizontal' ? options.hAlign : options.vAlign;
+    const primaryCanvasSize = options.flow === 'horizontal' ? options.canvasWidth : options.canvasHeight;
+    // Define initial variables
+    const composites = [];
+    let primaryCursor = options.gap;
+    let crossCursor = options.gap;
+    for (const lane of context.state.lanes) {
+        // Get the lanes vertical/horizontal offset
+        let primary = await computeOffset(options.flow, lane, primaryCanvasSize, options.gap, alignment);
+        let cross = crossCursor;
+        for (const im of lane) {
+            let finalizedImage = im;
+            let meta = await im.metadata();
+            // Update x/y position
+            primaryCursor += axis.getPrimary(meta) + options.gap;
+            // Handle image overflows for justified layouts
+            if (primaryCursor >= primaryCanvasSize) {
+                const overflow = primaryCursor - primaryCanvasSize;
+                const buffer = await im.resize(axis.crop(meta, overflow)).toBuffer();
+                finalizedImage = sharp(buffer);
+                meta = await finalizedImage.metadata();
+            }
+            // Handle borders and corner rounding
+            const borderedImage = await handleImageEdges(finalizedImage, {
+                imageWidth: meta.width,
+                imageHeight: meta.height,
+                borderWidth: options.borderWidth,
+                borderHeight: options.borderWidth,
+                borderColor: options.borderColor,
+                cornerRadius: options.cornerRadius,
+            });
+            // Create the composite
+            composites.push({
+                input: await borderedImage.toBuffer(),
+                left: options.flow === 'horizontal' ? primary : cross,
+                top: options.flow === 'horizontal' ? cross : primary,
+            });
+            primary += axis.getPrimary(meta) + options.gap;
+            // Update progress
+            if (onProgress) {
+                context.progressInfo.phase = 'Merging images';
+                context.progressInfo.completed += 1;
+                onProgress({ ...context.progressInfo });
+            }
+        }
+        primaryCursor = options.gap;
+        crossCursor += laneCrossSize + options.gap;
+    }
+    // Update context.composites
+    context.composites = composites;
+};

package/dist/core/merges/masonry/steps/resizeImages.d.ts

@@ -0,0 +1,7 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { MasonryState } from '../index.js';
+interface Options {
+    flow: 'horizontal' | 'vertical';
+}
+export declare const resizeImages: MergeStep<Options, MasonryState>;
+export {};

package/dist/core/merges/masonry/steps/resizeImages.js

@@ -0,0 +1,14 @@
+import { requireNonEmptyArray, requireState } from '../../../pipeline/guards.js';
+import { scaleImage } from '../../../utils/images/scaleImage.js';
+export const resizeImages = async (context, options, _onProgress) => {
+    requireNonEmptyArray(context.images, 'images');
+    // Require either rowHeight or columnWidth
+    options.flow === 'horizontal' ? requireState(context, 'rowHeight') : requireState(context, 'columnWidth');
+    // Rescale images to match rowHeight or columnWidth
+    const scaleOptions = options.flow === 'horizontal'
+        ? { height: context.state.rowHeight, finalizePipeline: true }
+        : { width: context.state.columnWidth, finalizePipeline: true };
+    for (let i = 0; i < context.images.length; i++) {
+        context.images[i] = await scaleImage(context.images[i], scaleOptions);
+    }
+};

package/dist/core/merges/masonry/steps/splitIntoLanes.d.ts

@@ -0,0 +1,17 @@
+import type { MergeStep } from '../../../pipeline/mergePipeline.js';
+import type { MasonryState } from '../index.js';
+interface HorizontalOptions {
+    flow: 'horizontal';
+    gap: number;
+    canvasWidth: number;
+    hAlign: 'justified' | 'left' | 'center' | 'right';
+}
+interface VerticalOptions {
+    flow: 'vertical';
+    gap: number;
+    canvasHeight: number;
+    vAlign: 'justified' | 'top' | 'middle' | 'bottom';
+}
+type Options = HorizontalOptions | VerticalOptions;
+export declare const splitIntoLanes: MergeStep<Options, MasonryState>;
+export {};

package/dist/core/merges/masonry/steps/splitIntoLanes.js

@@ -0,0 +1,78 @@
+import { requireNonEmptyArray } from '../../../pipeline/guards.js';
+export const splitIntoLanes = async (context, options, _onProgress) => {
+    requireNonEmptyArray(context.images, 'images');
+    // Split into lanes
+    const lanes = options.flow === 'horizontal'
+        ? await splitIntoRows(context.images, options.canvasWidth, options.gap, options.hAlign)
+        : await splitIntoColumns(context.images, options.canvasHeight, options.gap, options.vAlign);
+    // Assign lanes
+    context.state.lanes = lanes;
+};
+const splitIntoRows = async (images, canvasWidth, gap, hAlign) => {
+    const rows = [];
+    let currentRow = [];
+    let currentWidth = gap; // initial leading gap
+    for (const im of images) {
+        const meta = await im.metadata();
+        const nextWidth = currentWidth + meta.width + gap;
+        if (hAlign === 'justified') {
+            // Greedy: always push image, fix overflow later
+            currentRow.push(im);
+            currentWidth = nextWidth;
+            if (currentWidth + gap >= canvasWidth) {
+                rows.push(currentRow.slice());
+                currentRow.length = 0;
+                currentWidth = gap;
+            }
+        }
+        else {
+            // Non-greedy: break BEFORE adding image that doesn't fit
+            if (nextWidth > canvasWidth && currentRow.length > 0) {
+                rows.push(currentRow.slice());
+                currentRow = [];
+                currentWidth = gap;
+            }
+            // Add the image (may be first in a new row)
+            currentRow.push(im);
+            currentWidth += meta.width + gap;
+        }
+    }
+    if (currentRow.length > 0) {
+        rows.push(currentRow);
+    }
+    return rows;
+};
+const splitIntoColumns = async (images, canvasHeight, gap, vAlign) => {
+    const cols = [];
+    const currentCol = [];
+    let currentHeight = gap;
+    for (const im of images) {
+        const meta = await im.metadata();
+        let nextHeight = currentHeight + meta.height + gap;
+        if (vAlign === 'justified') {
+            // Greedy: always push image, fix overflow later
+            currentCol.push(im);
+            currentHeight = nextHeight;
+            if (currentHeight + gap >= canvasHeight) {
+                cols.push(currentCol.slice());
+                currentCol.length = 0;
+                currentHeight = gap;
+            }
+        }
+        else {
+            // Non-greedy: break BEFORE adding image that doesn't fit
+            if (nextHeight > canvasHeight && currentCol.length > 0) {
+                cols.push(currentCol.slice());
+                currentCol.length = 0;
+                currentHeight = gap;
+            }
+            // Add the image (may be first in a new column)
+            currentCol.push(im);
+            currentHeight += meta.height + gap;
+        }
+    }
+    if (currentCol.length > 0) {
+        cols.push(currentCol);
+    }
+    return cols;
+};

package/dist/core/merges/shared-steps/applyComposites.d.ts

@@ -0,0 +1,2 @@
+import type { MergeStep } from '../../pipeline/mergePipeline.js';
+export declare const applyComposites: MergeStep<any, any>;

package/dist/core/merges/shared-steps/applyComposites.js

@@ -0,0 +1,16 @@
+import { MESSAGES } from '../../modules/messages.js';
+import { MergeError } from '../../mergeError.js';
+import { requireContextProp } from '../../pipeline/guards.js';
+export const applyComposites = async (context, _options, _onProgress) => {
+    requireContextProp(context, 'canvas');
+    // Create final grid
+    try {
+        context.canvas = context.canvas.composite(context.composites);
+    }
+    catch (err) {
+        throw new MergeError(MESSAGES.ERROR.INTERNAL.message, {
+            type: 'internal',
+            cause: err,
+        });
+    }
+};

package/dist/core/merges/shared-steps/createCanvas.d.ts

@@ -0,0 +1,11 @@
+import type { MergeStep } from '../../pipeline/mergePipeline.js';
+import type { RGBA } from '../../utils/colors/types.js';
+interface Options {
+    canvasColor: RGBA;
+}
+interface State {
+    canvasWidth: number;
+    canvasHeight: number;
+}
+export declare const createCanvas: MergeStep<Options, State>;
+export {};

package/dist/core/merges/shared-steps/createCanvas.js

@@ -0,0 +1,17 @@
+import { requireState } from '../../pipeline/guards.js';
+import sharp from 'sharp';
+export const createCanvas = async (context, options, _onProgress) => {
+    requireState(context, 'canvasWidth');
+    requireState(context, 'canvasHeight');
+    // Create canvas
+    const canvas = sharp({
+        limitInputPixels: false,
+        create: {
+            width: context.state.canvasWidth,
+            height: context.state.canvasHeight,
+            channels: 4,
+            background: options.canvasColor,
+        },
+    });
+    context.canvas = canvas;
+};

package/dist/core/merges/shared-steps/exportCanvas.d.ts

@@ -0,0 +1,7 @@
+import type { SupportedOutputFormat } from '../../helpers.js';
+import type { MergeStep } from '../../pipeline/mergePipeline.js';
+interface Options {
+    format: SupportedOutputFormat;
+}
+export declare const exportCanvas: MergeStep<Options, any>;
+export {};