@image-marker/web 0.1.0

package/lib/module/core/web/renderer.js

@@ -0,0 +1,661 @@
+import { createWebCanvas, getCanvasContext, getSecurityErrorMessage, loadWebImage, } from './browser.js';
+import { degreesToRadians, encodeCanvas, fitSizeWithinMax, getExpandedCanvasSize, getRotatedBounds, normalizeOutputFormat, normalizeQuality, resolveAnchoredPosition, resolveSpreadValue, } from './helpers.js';
+import { resolveTilePlacements } from '../layout.js';
+function throwIfAborted(signal) {
+    if (!signal?.aborted)
+        return;
+    const error = new Error('Web canvas operation was aborted.');
+    error.name = 'AbortError';
+    throw error;
+}
+function assertFinitePositive(value, label) {
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`${label} must be a finite number greater than 0.`);
+    }
+    return value;
+}
+function resolveScale(value, label) {
+    return assertFinitePositive(value ?? 1, label);
+}
+function resolveAlpha(value, label) {
+    const alpha = value ?? 1;
+    if (!Number.isFinite(alpha) || alpha < 0 || alpha > 1) {
+        throw new Error(`${label} must be a finite number between 0 and 1.`);
+    }
+    return alpha;
+}
+const WEB_BLEND_MODES = {
+    normal: 'source-over',
+    multiply: 'multiply',
+    screen: 'screen',
+    overlay: 'overlay',
+    darken: 'darken',
+    lighten: 'lighten',
+};
+function resolveBlendMode(value) {
+    return WEB_BLEND_MODES[value ?? 'normal'];
+}
+function resolveRotation(value, label) {
+    const rotation = value ?? 0;
+    if (!Number.isFinite(rotation)) {
+        throw new Error(`${label} must be a finite number.`);
+    }
+    return rotation;
+}
+function escapeFontFamily(fontFamily) {
+    return fontFamily.replace(/["\\]/g, '\\$&');
+}
+function createFont(style, fontSize) {
+    const italic = style?.italic ? 'italic ' : '';
+    const weight = style?.bold ? '700 ' : '400 ';
+    const families = [style?.fontName, ...(style?.fontFallbacks ?? [])]
+        .filter((family) => Boolean(family))
+        .map((family) => `"${escapeFontFamily(family)}"`);
+    const family = [...families, 'sans-serif'].join(', ');
+    return `${italic}${weight}${fontSize}px ${family}`;
+}
+function resolveFontSize(style, canvasWidth) {
+    const fontSize = style?.fontSizeRatio !== undefined
+        ? canvasWidth * style.fontSizeRatio
+        : style?.fontSize ?? 14;
+    return assertFinitePositive(fontSize, 'text font size');
+}
+function metricHeight(metrics, fontSize) {
+    const ascent = metrics.actualBoundingBoxAscent ??
+        metrics.fontBoundingBoxAscent ??
+        fontSize * 0.8;
+    const descent = metrics.actualBoundingBoxDescent ??
+        metrics.fontBoundingBoxDescent ??
+        fontSize * 0.2;
+    return Math.max(ascent + descent, fontSize);
+}
+function measureTextWidth(context, text, letterSpacing) {
+    const characters = Array.from(text);
+    return Math.max(context.measureText(text).width +
+        Math.max(characters.length - 1, 0) * letterSpacing, 0);
+}
+function splitOversizedToken(context, token, maxWidth, letterSpacing) {
+    const chunks = [];
+    let chunk = '';
+    for (const character of Array.from(token)) {
+        const candidate = chunk + character;
+        if (chunk &&
+            measureTextWidth(context, candidate, letterSpacing) > maxWidth) {
+            chunks.push(chunk);
+            chunk = character;
+        }
+        else {
+            chunk = candidate;
+        }
+    }
+    if (chunk || chunks.length === 0) {
+        chunks.push(chunk);
+    }
+    return chunks;
+}
+function wrapParagraph(context, paragraph, maxWidth, wrap, letterSpacing) {
+    if (wrap === 'none' ||
+        measureTextWidth(context, paragraph, letterSpacing) <= maxWidth) {
+        return [paragraph];
+    }
+    if (wrap === 'character') {
+        return splitOversizedToken(context, paragraph, maxWidth, letterSpacing);
+    }
+    const lines = [];
+    const tokens = paragraph.match(/\s+|\S+/gu) ?? [''];
+    let current = '';
+    for (const token of tokens) {
+        if (/^\s+$/u.test(token)) {
+            if (current || lines.length === 0) {
+                current += token;
+            }
+            continue;
+        }
+        const candidate = current + token;
+        if (measureTextWidth(context, candidate, letterSpacing) <= maxWidth) {
+            current = candidate;
+            continue;
+        }
+        const completedLine = current.trimEnd();
+        if (completedLine) {
+            lines.push(completedLine);
+        }
+        current = '';
+        if (measureTextWidth(context, token, letterSpacing) <= maxWidth) {
+            current = token;
+            continue;
+        }
+        const chunks = splitOversizedToken(context, token, maxWidth, letterSpacing);
+        lines.push(...chunks.slice(0, -1));
+        current = chunks[chunks.length - 1] ?? '';
+    }
+    const finalLine = current.trimEnd();
+    if (finalLine || lines.length === 0) {
+        lines.push(finalLine);
+    }
+    return lines;
+}
+function ellipsizeLine(context, value, maxWidth, letterSpacing) {
+    const ellipsis = '…';
+    if (measureTextWidth(context, ellipsis, letterSpacing) > maxWidth) {
+        return '';
+    }
+    let characters = Array.from(value.trimEnd());
+    while (characters.length > 0 &&
+        measureTextWidth(context, `${characters.join('')}${ellipsis}`, letterSpacing) > maxWidth) {
+        characters = characters.slice(0, -1);
+    }
+    return `${characters.join('')}${ellipsis}`;
+}
+function measureTextLayout(context, text, style, canvasWidth) {
+    const fontSize = resolveFontSize(style, canvasWidth);
+    context.font = createFont(style, fontSize);
+    const maxWidth = assertFinitePositive(resolveSpreadValue(style?.maxWidth, canvasWidth) ?? canvasWidth, 'text maxWidth');
+    const letterSpacing = style?.letterSpacing ?? 0;
+    const wrap = style?.wrap ?? 'word';
+    const rawLines = text
+        .split(/\r\n?|\n/)
+        .flatMap((line) => wrapParagraph(context, line, maxWidth, wrap, letterSpacing));
+    const maxLines = style?.maxLines ?? Number.POSITIVE_INFINITY;
+    const omittedLines = rawLines.length > maxLines;
+    const visibleLines = rawLines.slice(0, maxLines);
+    const lineOverflow = visibleLines.some((line) => measureTextWidth(context, line, letterSpacing) > maxWidth);
+    if (style?.overflow === 'ellipsis' &&
+        (omittedLines || lineOverflow) &&
+        visibleLines.length > 0) {
+        const finalIndex = visibleLines.length - 1;
+        visibleLines[finalIndex] = ellipsizeLine(context, visibleLines[finalIndex] ?? '', maxWidth, letterSpacing);
+    }
+    const lines = visibleLines.map((line) => ({
+        text: line,
+        width: Math.min(measureTextWidth(context, line, letterSpacing), maxWidth),
+    }));
+    const representative = context.measureText(lines.reduce((widest, line) => (line.width > widest.width ? line : widest), lines[0] ?? { text: '', width: 0 }).text || 'Mg');
+    const naturalLineHeight = metricHeight(representative, fontSize);
+    const lineHeight = style?.lineHeight ?? naturalLineHeight;
+    return {
+        lines,
+        width: Math.max(...lines.map((line) => line.width), 0),
+        height: Math.max(lineHeight * lines.length, 1),
+        lineHeight,
+        fontSize,
+        maxWidth,
+        clipped: omittedLines || lineOverflow,
+        letterSpacing,
+        direction: style?.direction ?? 'auto',
+    };
+}
+function parsePaddingTokens(value) {
+    return typeof value === 'number'
+        ? [String(value)]
+        : value.trim().split(/\s+/).filter(Boolean).slice(0, 4);
+}
+function resolveAxisValue(value, relativeTo) {
+    const resolved = resolveSpreadValue(value, relativeTo);
+    return resolved === undefined ? undefined : Math.max(resolved, 0);
+}
+function resolvePadding(style, canvas) {
+    const padding = { top: 0, right: 0, bottom: 0, left: 0 };
+    if (style.padding !== undefined) {
+        const values = parsePaddingTokens(style.padding);
+        const [first = '0', second = first, third = first, fourth = second] = values;
+        if (values.length === 1) {
+            padding.top = resolveAxisValue(first, canvas.height) ?? 0;
+            padding.right = resolveAxisValue(first, canvas.width) ?? 0;
+            padding.bottom = resolveAxisValue(first, canvas.height) ?? 0;
+            padding.left = resolveAxisValue(first, canvas.width) ?? 0;
+        }
+        else if (values.length === 2) {
+            padding.top = resolveAxisValue(first, canvas.height) ?? 0;
+            padding.right = resolveAxisValue(second, canvas.width) ?? 0;
+            padding.bottom = padding.top;
+            padding.left = padding.right;
+        }
+        else if (values.length === 3) {
+            padding.top = resolveAxisValue(first, canvas.height) ?? 0;
+            padding.right = resolveAxisValue(second, canvas.width) ?? 0;
+            padding.bottom = resolveAxisValue(third, canvas.height) ?? 0;
+            padding.left = padding.right;
+        }
+        else {
+            padding.top = resolveAxisValue(first, canvas.height) ?? 0;
+            padding.right = resolveAxisValue(second, canvas.width) ?? 0;
+            padding.bottom = resolveAxisValue(third, canvas.height) ?? 0;
+            padding.left = resolveAxisValue(fourth, canvas.width) ?? 0;
+        }
+    }
+    const horizontal = resolveAxisValue(style.paddingHorizontal, canvas.width) ??
+        resolveAxisValue(style.paddingX, canvas.width);
+    const vertical = resolveAxisValue(style.paddingVertical, canvas.height) ??
+        resolveAxisValue(style.paddingY, canvas.height);
+    if (horizontal !== undefined) {
+        padding.left = horizontal;
+        padding.right = horizontal;
+    }
+    if (vertical !== undefined) {
+        padding.top = vertical;
+        padding.bottom = vertical;
+    }
+    padding.left =
+        resolveAxisValue(style.paddingLeft, canvas.width) ?? padding.left;
+    padding.right =
+        resolveAxisValue(style.paddingRight, canvas.width) ?? padding.right;
+    padding.top =
+        resolveAxisValue(style.paddingTop, canvas.height) ?? padding.top;
+    padding.bottom =
+        resolveAxisValue(style.paddingBottom, canvas.height) ?? padding.bottom;
+    return padding;
+}
+function resolveRadiusValue(value, rect) {
+    return {
+        x: Math.max(resolveSpreadValue(value?.x, rect.width) ?? 0, 0),
+        y: Math.max(resolveSpreadValue(value?.y, rect.height) ?? 0, 0),
+    };
+}
+function resolveCornerRadii(cornerRadius, rect) {
+    const all = resolveRadiusValue(cornerRadius?.all, rect);
+    const resolveCorner = (value) => {
+        const resolved = value ? resolveRadiusValue(value, rect) : all;
+        return {
+            x: Math.min(resolved.x, rect.width / 2),
+            y: Math.min(resolved.y, rect.height / 2),
+        };
+    };
+    return {
+        topLeft: resolveCorner(cornerRadius?.topLeft),
+        topRight: resolveCorner(cornerRadius?.topRight),
+        bottomRight: resolveCorner(cornerRadius?.bottomRight),
+        bottomLeft: resolveCorner(cornerRadius?.bottomLeft),
+    };
+}
+function roundedRectPath(context, x, y, width, height, cornerRadius) {
+    const radii = resolveCornerRadii(cornerRadius, { width, height });
+    context.beginPath();
+    context.moveTo(x + radii.topLeft.x, y);
+    context.lineTo(x + width - radii.topRight.x, y);
+    context.quadraticCurveTo(x + width, y, x + width, y + radii.topRight.y);
+    context.lineTo(x + width, y + height - radii.bottomRight.y);
+    context.quadraticCurveTo(x + width, y + height, x + width - radii.bottomRight.x, y + height);
+    context.lineTo(x + radii.bottomLeft.x, y + height);
+    context.quadraticCurveTo(x, y + height, x, y + height - radii.bottomLeft.y);
+    context.lineTo(x, y + radii.topLeft.y);
+    context.quadraticCurveTo(x, y, x + radii.topLeft.x, y);
+    context.closePath();
+}
+function drawTextBackground(context, style, origin, layout, canvas, outlineInset = 0) {
+    const padding = resolvePadding(style, canvas);
+    let x = origin.x - outlineInset - padding.left;
+    let y = origin.y - outlineInset - padding.top;
+    let width = layout.width + outlineInset * 2 + padding.left + padding.right;
+    let height = layout.height + outlineInset * 2 + padding.top + padding.bottom;
+    if (style.type === 'stretchX') {
+        x = 0;
+        width = canvas.width;
+    }
+    else if (style.type === 'stretchY') {
+        y = 0;
+        height = canvas.height;
+    }
+    context.fillStyle = style.color;
+    roundedRectPath(context, x, y, width, height, style.cornerRadius);
+    context.fill();
+}
+function getAlignedTextX(alignment, originX, layoutWidth) {
+    if (alignment === 'center') {
+        return originX + layoutWidth / 2;
+    }
+    if (alignment === 'right') {
+        return originX + layoutWidth;
+    }
+    return originX;
+}
+function getLineStartX(alignment, textX, lineWidth) {
+    if (alignment === 'center') {
+        return textX - lineWidth / 2;
+    }
+    if (alignment === 'right') {
+        return textX - lineWidth;
+    }
+    return textX;
+}
+function drawTextDecorations(context, options, layout, textX, lineIndex, lineWidth) {
+    if (!options.style?.underline && !options.style?.strikeThrough) {
+        return;
+    }
+    const lineStart = getLineStartX(options.style.textAlign, textX, lineWidth);
+    const top = lineIndex * layout.lineHeight;
+    context.beginPath();
+    if (options.style.underline) {
+        context.moveTo(lineStart, top + layout.fontSize);
+        context.lineTo(lineStart + lineWidth, top + layout.fontSize);
+    }
+    if (options.style.strikeThrough) {
+        context.moveTo(lineStart, top + layout.fontSize * 0.52);
+        context.lineTo(lineStart + lineWidth, top + layout.fontSize * 0.52);
+    }
+    const stroke = context;
+    stroke.lineWidth = Math.max(layout.fontSize / 16, 1);
+    stroke.strokeStyle = options.style.color ?? '#000000';
+    stroke.stroke();
+}
+function drawSpacedText(context, method, text, textX, y, alignment, lineWidth, letterSpacing, direction) {
+    if (letterSpacing === 0 || 'letterSpacing' in context) {
+        if ('letterSpacing' in context) {
+            context.letterSpacing = `${letterSpacing}px`;
+        }
+        context[method](text, textX, y);
+        return;
+    }
+    const previousAlignment = context.textAlign;
+    context.textAlign = 'left';
+    const characters = Array.from(text);
+    if (direction === 'rtl') {
+        characters.reverse();
+    }
+    let cursor = getLineStartX(alignment, textX, lineWidth);
+    characters.forEach((character, index) => {
+        context[method](character, cursor, y);
+        cursor += context.measureText(character).width;
+        if (index < characters.length - 1) {
+            cursor += letterSpacing;
+        }
+    });
+    context.textAlign = previousAlignment;
+}
+function drawTextAtPosition(context, options, canvas, layout, visualPosition, rotation) {
+    const style = options.style;
+    const strokeWidth = style?.strokeStyle?.width ?? 0;
+    const outlineInset = strokeWidth / 2;
+    const visualSize = {
+        width: layout.width + outlineInset * 2,
+        height: layout.height + outlineInset * 2,
+    };
+    const position = {
+        x: visualPosition.x + outlineInset,
+        y: visualPosition.y + outlineInset,
+    };
+    context.save();
+    try {
+        if (rotation !== 0) {
+            context.translate(visualPosition.x + visualSize.width / 2, visualPosition.y + visualSize.height / 2);
+            context.rotate(degreesToRadians(rotation));
+            context.translate(-(visualPosition.x + visualSize.width / 2), -(visualPosition.y + visualSize.height / 2));
+        }
+        if (style?.textBackgroundStyle) {
+            drawTextBackground(context, style.textBackgroundStyle, position, layout, canvas, outlineInset);
+        }
+        context.font = createFont(style, layout.fontSize);
+        context.fillStyle = style?.color ?? '#000000';
+        context.textAlign = style?.textAlign ?? 'left';
+        context.textBaseline = 'top';
+        if ('direction' in context) {
+            context.direction =
+                layout.direction === 'auto' ? 'inherit' : layout.direction;
+        }
+        context.shadowBlur = style?.shadowStyle?.radius ?? 0;
+        context.shadowOffsetX = style?.shadowStyle?.dx ?? 0;
+        context.shadowOffsetY = style?.shadowStyle?.dy ?? 0;
+        context.shadowColor = style?.shadowStyle?.color ?? 'transparent';
+        context.lineJoin = 'round';
+        context.lineWidth = strokeWidth;
+        context.strokeStyle = style?.strokeStyle?.color ?? '#000000';
+        const textX = getAlignedTextX(style?.textAlign, position.x, layout.width);
+        if (style?.skewX) {
+            context.translate(position.x, position.y);
+            context.transform(1, 0, style.skewX, 1, 0, 0);
+            context.translate(-position.x, -position.y);
+        }
+        if (layout.clipped) {
+            context.beginPath();
+            context.rect(position.x, position.y, layout.width, layout.height);
+            context.clip();
+        }
+        layout.lines.forEach((line, lineIndex) => {
+            const lineY = position.y + lineIndex * layout.lineHeight;
+            if (strokeWidth > 0) {
+                drawSpacedText(context, 'strokeText', line.text, textX, lineY, style?.textAlign, line.width, layout.letterSpacing, layout.direction);
+                const shadowColor = context.shadowColor;
+                context.shadowColor = 'transparent';
+                drawSpacedText(context, 'fillText', line.text, textX, lineY, style?.textAlign, line.width, layout.letterSpacing, layout.direction);
+                context.shadowColor = shadowColor;
+            }
+            else {
+                drawSpacedText(context, 'fillText', line.text, textX, lineY, style?.textAlign, line.width, layout.letterSpacing, layout.direction);
+            }
+            context.save();
+            context.translate(position.x, position.y);
+            drawTextDecorations(context, options, layout, textX - position.x, lineIndex, line.width);
+            context.restore();
+        });
+    }
+    finally {
+        context.restore();
+    }
+}
+function drawTextLayerContent(context, options, canvas) {
+    const style = options.style;
+    const textLayout = measureTextLayout(context, options.text, style, canvas.width);
+    const rotation = resolveRotation(style?.rotate, 'text rotation');
+    const strokeWidth = style?.strokeStyle?.width ?? 0;
+    const outlineInset = strokeWidth / 2;
+    const visualSize = {
+        width: textLayout.width + outlineInset * 2,
+        height: textLayout.height + outlineInset * 2,
+    };
+    if (options.layout?.type === 'tile') {
+        const rotatedSize = getRotatedBounds(visualSize, rotation);
+        const placements = resolveTilePlacements(options.layout, canvas, rotatedSize);
+        const originInset = {
+            x: (rotatedSize.width - visualSize.width) / 2,
+            y: (rotatedSize.height - visualSize.height) / 2,
+        };
+        placements.forEach((placement) => {
+            drawTextAtPosition(context, options, canvas, textLayout, {
+                x: placement.x + originInset.x,
+                y: placement.y + originInset.y,
+            }, rotation);
+        });
+        return;
+    }
+    const position = resolveAnchoredPosition(options.position, canvas, visualSize, 20);
+    drawTextAtPosition(context, options, canvas, textLayout, position, rotation);
+}
+function drawTextLayer(context, options, canvas) {
+    const previousAlpha = context.globalAlpha;
+    const previousBlendMode = context.globalCompositeOperation;
+    const alpha = resolveAlpha(options.alpha, 'watermark text alpha');
+    context.save();
+    try {
+        context.globalAlpha = previousAlpha * alpha;
+        context.globalCompositeOperation = resolveBlendMode(options.blendMode);
+        drawTextLayerContent(context, options, canvas);
+    }
+    finally {
+        context.globalAlpha = previousAlpha;
+        context.globalCompositeOperation = previousBlendMode;
+        context.restore();
+    }
+}
+function fullSourceBounds(image) {
+    return { x: 0, y: 0, width: image.width, height: image.height };
+}
+function getVisibleSourceBounds(image, runtime) {
+    throwIfAborted(runtime?.signal);
+    const canvas = createWebCanvas(image.width, image.height, runtime?.resources);
+    const context = getCanvasContext(canvas);
+    context.drawImage(image.image, 0, 0);
+    let pixels;
+    try {
+        pixels = context.getImageData(0, 0, image.width, image.height).data;
+    }
+    catch (error) {
+        const name = error && typeof error === 'object' && 'name' in error
+            ? String(error.name)
+            : '';
+        if (name === 'SecurityError') {
+            throw new Error(getSecurityErrorMessage('trim transparent padding'));
+        }
+        throw error;
+    }
+    let left = image.width;
+    let top = image.height;
+    let right = -1;
+    let bottom = -1;
+    for (let y = 0; y < image.height; y += 1) {
+        for (let x = 0; x < image.width; x += 1) {
+            const alpha = pixels[(y * image.width + x) * 4 + 3] ?? 0;
+            if (alpha > 0) {
+                left = Math.min(left, x);
+                top = Math.min(top, y);
+                right = Math.max(right, x);
+                bottom = Math.max(bottom, y);
+            }
+        }
+    }
+    return right < left || bottom < top
+        ? fullSourceBounds(image)
+        : {
+            x: left,
+            y: top,
+            width: right - left + 1,
+            height: bottom - top + 1,
+        };
+}
+async function drawImageLayer(context, options, canvas, maxSize, runtime) {
+    const image = await loadWebImage(options.src, runtime?.resources, runtime?.signal);
+    try {
+        throwIfAborted(runtime?.signal);
+        const sourceBounds = options.trimTransparentPadding
+            ? getVisibleSourceBounds(image, runtime)
+            : fullSourceBounds(image);
+        const boundedImageSize = fitSizeWithinMax(image, maxSize);
+        const decodeScale = boundedImageSize.width / image.width;
+        const scale = resolveScale(options.scale, 'watermark image scale') * decodeScale;
+        const alpha = resolveAlpha(options.alpha, 'watermark image alpha');
+        const rotation = resolveRotation(options.rotate, 'watermark image rotation');
+        const scaledSize = {
+            width: sourceBounds.width * scale,
+            height: sourceBounds.height * scale,
+        };
+        const rotatedBounds = getRotatedBounds(scaledSize, rotation);
+        const positions = options.layout?.type === 'tile'
+            ? resolveTilePlacements(options.layout, canvas, rotatedBounds)
+            : [resolveAnchoredPosition(options.position, canvas, rotatedBounds, 0)];
+        positions.forEach((position) => {
+            const previousAlpha = context.globalAlpha;
+            const previousBlendMode = context.globalCompositeOperation;
+            context.save();
+            try {
+                context.globalAlpha = previousAlpha * alpha;
+                context.globalCompositeOperation = resolveBlendMode(options.blendMode);
+                context.imageSmoothingEnabled = false;
+                context.translate(position.x - rotatedBounds.left, position.y - rotatedBounds.top);
+                context.rotate(degreesToRadians(rotation));
+                context.scale(scale, scale);
+                context.drawImage(image.image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, sourceBounds.width, sourceBounds.height);
+            }
+            finally {
+                context.globalAlpha = previousAlpha;
+                context.globalCompositeOperation = previousBlendMode;
+                context.restore();
+            }
+        });
+    }
+    finally {
+        image.cleanup();
+    }
+}
+function validateRotationCanvasMode(mode) {
+    const resolved = mode ?? 'expand';
+    if (resolved !== 'expand' && resolved !== 'crop') {
+        throw new Error(`Unsupported rotation canvas mode: ${resolved}.`);
+    }
+    return resolved;
+}
+function normalizeMatteColor(value) {
+    const resolved = value ?? '#FFFFFF';
+    const match = typeof resolved === 'string'
+        ? /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(resolved)
+        : null;
+    const hex = match?.[1];
+    if (!hex) {
+        throw new Error('matteColor must use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA.');
+    }
+    const expanded = hex.length <= 4
+        ? Array.from(hex)
+            .map((character) => character + character)
+            .join('')
+        : hex;
+    return `#${expanded.slice(0, 6).toUpperCase()}`;
+}
+/** Render a complete composition into a browser canvas. */
+export async function renderWebCompositionToCanvas(backgroundImage, layers, output, runtime) {
+    throwIfAborted(runtime?.signal);
+    if (!backgroundImage?.src) {
+        throw new Error('please set image!');
+    }
+    const format = normalizeOutputFormat(output.saveFormat);
+    normalizeQuality(output.quality);
+    const matteColor = normalizeMatteColor(output.matteColor);
+    const canvasMode = validateRotationCanvasMode(output.rotationCanvasMode);
+    const backgroundScale = resolveScale(backgroundImage.scale, 'background image scale');
+    const backgroundAlpha = resolveAlpha(backgroundImage.alpha, 'background image alpha');
+    const backgroundRotation = resolveRotation(backgroundImage.rotate, 'background image rotation');
+    const background = await loadWebImage(backgroundImage.src, runtime?.resources, runtime?.signal);
+    try {
+        throwIfAborted(runtime?.signal);
+        const boundedBackgroundSize = fitSizeWithinMax(background, output.maxSize);
+        const compositionSize = {
+            width: Math.max(Math.round(boundedBackgroundSize.width * backgroundScale), 1),
+            height: Math.max(Math.round(boundedBackgroundSize.height * backgroundScale), 1),
+        };
+        const outputSize = canvasMode === 'expand'
+            ? getExpandedCanvasSize(compositionSize, backgroundRotation)
+            : compositionSize;
+        const canvas = createWebCanvas(outputSize.width, outputSize.height, runtime?.resources);
+        const context = getCanvasContext(canvas);
+        if (format === 'jpg') {
+            context.fillStyle = matteColor;
+            context.fillRect(0, 0, outputSize.width, outputSize.height);
+        }
+        context.save();
+        try {
+            if (backgroundRotation !== 0) {
+                context.translate(outputSize.width / 2, outputSize.height / 2);
+                context.rotate(degreesToRadians(backgroundRotation));
+                context.translate(-compositionSize.width / 2, -compositionSize.height / 2);
+            }
+            context.save();
+            try {
+                context.globalAlpha = backgroundAlpha;
+                context.imageSmoothingEnabled = true;
+                context.drawImage(background.image, 0, 0, compositionSize.width, compositionSize.height);
+            }
+            finally {
+                context.restore();
+            }
+            for (const layer of layers) {
+                throwIfAborted(runtime?.signal);
+                if (layer.type === 'text') {
+                    drawTextLayer(context, layer.options, compositionSize);
+                }
+                else {
+                    await drawImageLayer(context, layer.options, compositionSize, output.maxSize, runtime);
+                }
+            }
+        }
+        finally {
+            context.restore();
+        }
+        return canvas;
+    }
+    finally {
+        background.cleanup();
+    }
+}
+/** Render a complete composition into a data URL. */
+export async function renderWebComposition(backgroundImage, layers, output, runtime) {
+    const canvas = await renderWebCompositionToCanvas(backgroundImage, layers, output, runtime);
+    throwIfAborted(runtime?.signal);
+    return encodeCanvas(canvas, output.saveFormat, output.quality);
+}