appshot-cli 0.6.0 → 0.8.0

package/dist/core/compose.js

@@ -43,6 +43,61 @@ function escapeXml(text) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
+/**
+ * Generate SVG with text, background, and border support
+ */
+function generateCaptionSVG(lines, width, height, fontSize, fontFamily, fontStyle, fontWeight, textColor, lineHeight, captionConfig) {
+    const backgroundConfig = captionConfig.background;
+    const borderConfig = captionConfig.border;
+    // Calculate text positioning
+    const totalTextHeight = lines.length * fontSize * lineHeight;
+    const startY = (height - totalTextHeight) / 2 + fontSize;
+    // SVG elements array
+    const svgElements = [];
+    // Add background rectangle if configured
+    if (backgroundConfig?.color) {
+        const bgPadding = backgroundConfig.padding || 20;
+        const bgOpacity = backgroundConfig.opacity || 0.8;
+        // Use full width minus margins for uniform appearance
+        const sideMargin = 30; // Margin from edges
+        const bgWidth = width - (sideMargin * 2);
+        const bgHeight = totalTextHeight + bgPadding * 2;
+        const bgX = sideMargin;
+        const bgY = startY - fontSize - bgPadding;
+        const bgRadius = borderConfig?.radius || 12; // Default to 12px for better visibility
+        svgElements.push(`<rect x="${bgX}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" ` +
+            `fill="${backgroundConfig.color}" opacity="${bgOpacity}" rx="${bgRadius}"/>`);
+    }
+    // Add border rectangle if configured
+    if (borderConfig?.color && borderConfig?.width) {
+        const bgPadding = backgroundConfig?.padding || 20;
+        const borderWidth = borderConfig.width;
+        const borderRadius = borderConfig.radius || 12;
+        // Use full width minus margins for uniform appearance
+        const sideMargin = 30; // Margin from edges
+        const rectWidth = width - (sideMargin * 2);
+        const rectHeight = totalTextHeight + bgPadding * 2;
+        const rectX = sideMargin;
+        const rectY = startY - fontSize - bgPadding;
+        svgElements.push(`<rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" ` +
+            `fill="none" stroke="${borderConfig.color}" stroke-width="${borderWidth}" rx="${borderRadius}"/>`);
+    }
+    // Add text elements
+    const textElements = lines.map((line, index) => {
+        const y = startY + (index * fontSize * lineHeight);
+        return `<text x="${width / 2}" y="${y}" ` +
+            `font-family="${fontFamily}" ` +
+            `font-size="${fontSize}" ` +
+            `font-style="${fontStyle}" ` +
+            `font-weight="${fontWeight}" ` +
+            `fill="${textColor}" ` +
+            `text-anchor="middle">${escapeXml(line)}</text>`;
+    });
+    svgElements.push(...textElements);
+    return `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+    ${svgElements.join('\n    ')}
+  </svg>`;
+}
 /**
  * Compose a complete App Store screenshot with gradient, caption, and framed device
  */
@@ -80,10 +135,10 @@ export async function composeAppStoreScreenshot(options) {
             deviceTop = Math.floor((outputHeight - targetDeviceHeight) / 2);
         }
     }
-    // Calculate caption height if positioned above
+    // Calculate caption height based on position
     let captionHeight = 0;
     let captionLines = [];
-    if (captionPosition === 'above' && caption) {
+    if ((captionPosition === 'above' || captionPosition === 'below') && caption) {
         const isWatch = outputWidth < 500;
         const captionFontSize = deviceConfig.captionSize || captionConfig.fontsize;
         // Get caption box config (device-specific or global)
@@ -165,10 +220,6 @@ export async function composeAppStoreScreenshot(options) {
                 // Fallback if no lines were calculated
                 captionLines = [caption];
             }
-            // Calculate vertical positioning for centered text block
-            const totalTextHeight = captionLines.length * fontSize * lineHeight;
-            const startY = (captionHeight - totalTextHeight) / 2 + fontSize;
-            // Create SVG with multiple text lines
             // Use device-specific font if available, otherwise use global caption font
             const fontToUse = deviceConfig.captionFont || captionConfig.font;
             // Parse font name for style and weight
@@ -184,19 +235,7 @@ export async function composeAppStoreScreenshot(options) {
                     console.log(pc.dim(`      Style: ${fontStyle}, Weight: ${fontWeight}`));
                 }
             }
-            const textElements = captionLines.map((line, index) => {
-                const y = startY + (index * fontSize * lineHeight);
-                return `<text x="${canvasWidth / 2}" y="${y}" 
-                font-family="${fontFamily}" 
-                font-size="${fontSize}" 
-                font-style="${fontStyle}"
-                font-weight="${fontWeight}" 
-                fill="${captionConfig.color}" 
-                text-anchor="middle">${escapeXml(line)}</text>`;
-            }).join('\n');
-            svgText = `<svg width="${canvasWidth}" height="${captionHeight}" xmlns="http://www.w3.org/2000/svg">
-        ${textElements}
-      </svg>`;
+            svgText = generateCaptionSVG(captionLines, canvasWidth, captionHeight, fontSize, fontFamily, fontStyle, fontWeight, captionConfig.color, lineHeight, captionConfig);
             const captionImage = await sharp(Buffer.from(svgText))
                 .png()
                 .toBuffer();
@@ -236,7 +275,19 @@ export async function composeAppStoreScreenshot(options) {
         const originalFrameHeight = frameMetadata.frameHeight;
         // Calculate available space for the device
         const availableWidth = outputWidth;
-        let availableHeight = Math.max(100, outputHeight - captionHeight); // Default: account for caption
+        let availableHeight;
+        // For 'above' positioning, reduce available height by caption
+        // For 'below' positioning, we'll adjust positioning later but calculate scale normally
+        if (captionPosition === 'above') {
+            availableHeight = Math.max(100, outputHeight - captionHeight);
+        }
+        else if (captionPosition === 'below') {
+            availableHeight = Math.max(100, outputHeight - captionHeight);
+        }
+        else {
+            // 'overlay' positioning doesn't reduce available space
+            availableHeight = outputHeight;
+        }
         // If frameScale is explicitly set, use total output height for consistent sizing
         if (deviceFrameScale !== undefined) {
             availableHeight = outputHeight; // Use full height for consistent scale
@@ -412,34 +463,94 @@ export async function composeAppStoreScreenshot(options) {
             }
         }
         // Recalculate position with actual caption height
-        if (typeof framePosition === 'number') {
-            // Custom position as percentage from top (0-100)
-            const availableSpace = canvasHeight - captionHeight - targetDeviceHeight;
-            deviceTop = captionHeight + Math.floor(availableSpace * (framePosition / 100));
-        }
-        else if (framePosition === 'top') {
-            deviceTop = captionHeight;
-        }
-        else if (framePosition === 'bottom') {
-            deviceTop = canvasHeight - targetDeviceHeight;
+        if (captionPosition === 'above') {
+            // Caption above: position device below caption area
+            if (typeof framePosition === 'number') {
+                // Custom position as percentage from top (0-100)
+                const availableSpace = canvasHeight - captionHeight - targetDeviceHeight;
+                deviceTop = captionHeight + Math.floor(availableSpace * (framePosition / 100));
+            }
+            else if (framePosition === 'top') {
+                deviceTop = captionHeight;
+            }
+            else if (framePosition === 'bottom') {
+                deviceTop = canvasHeight - targetDeviceHeight;
+            }
+            else if (framePosition === 'center') {
+                // Default centered positioning
+                if (frameMetadata.deviceType === 'watch' && !deviceConfig.framePosition) {
+                    // Special watch positioning (unless explicitly overridden)
+                    deviceTop = canvasHeight - Math.floor(targetDeviceHeight * 0.75) - 25;
+                }
+                else {
+                    const availableSpace = canvasHeight - captionHeight;
+                    deviceTop = captionHeight + Math.floor((availableSpace - targetDeviceHeight) / 2);
+                }
+            }
+            else {
+                // Default to centered
+                deviceTop = captionHeight;
+            }
+            // Ensure device doesn't go off canvas
+            deviceTop = Math.floor(Math.max(captionHeight, Math.min(deviceTop, canvasHeight - targetDeviceHeight)));
         }
-        else if (framePosition === 'center') {
-            // Default centered positioning
-            if (frameMetadata.deviceType === 'watch' && !deviceConfig.framePosition) {
-                // Special watch positioning (unless explicitly overridden)
-                deviceTop = canvasHeight - Math.floor(targetDeviceHeight * 0.75) - 25;
+        else if (captionPosition === 'below') {
+            // Caption below: position device in upper area, leaving space for caption at bottom
+            const deviceAreaHeight = canvasHeight - captionHeight;
+            if (typeof framePosition === 'number') {
+                // Custom position as percentage within device area
+                const availableSpace = deviceAreaHeight - targetDeviceHeight;
+                deviceTop = Math.floor(availableSpace * (framePosition / 100));
+            }
+            else if (framePosition === 'top') {
+                deviceTop = 0;
+            }
+            else if (framePosition === 'bottom') {
+                deviceTop = deviceAreaHeight - targetDeviceHeight;
+            }
+            else if (framePosition === 'center') {
+                // Default centered positioning in device area
+                if (frameMetadata.deviceType === 'watch' && !deviceConfig.framePosition) {
+                    // Special watch positioning (unless explicitly overridden)
+                    deviceTop = Math.max(0, deviceAreaHeight - Math.floor(targetDeviceHeight * 0.75) - 25);
+                }
+                else {
+                    deviceTop = Math.floor((deviceAreaHeight - targetDeviceHeight) / 2);
+                }
             }
             else {
-                const availableSpace = canvasHeight - captionHeight;
-                deviceTop = captionHeight + Math.floor((availableSpace - targetDeviceHeight) / 2);
+                // Default to centered in device area
+                deviceTop = Math.floor((deviceAreaHeight - targetDeviceHeight) / 2);
             }
+            // Ensure device doesn't go off canvas or into caption area
+            deviceTop = Math.floor(Math.max(0, Math.min(deviceTop, deviceAreaHeight - targetDeviceHeight)));
         }
         else {
-            // Default to centered
-            deviceTop = captionHeight;
+            // 'overlay' positioning: position device normally without caption area considerations
+            if (typeof framePosition === 'number') {
+                const availableSpace = canvasHeight - targetDeviceHeight;
+                deviceTop = Math.floor(availableSpace * (framePosition / 100));
+            }
+            else if (framePosition === 'top') {
+                deviceTop = 0;
+            }
+            else if (framePosition === 'bottom') {
+                deviceTop = canvasHeight - targetDeviceHeight;
+            }
+            else if (framePosition === 'center') {
+                if (frameMetadata.deviceType === 'watch' && !deviceConfig.framePosition) {
+                    deviceTop = canvasHeight - Math.floor(targetDeviceHeight * 0.75) - 25;
+                }
+                else {
+                    deviceTop = Math.floor((canvasHeight - targetDeviceHeight) / 2);
+                }
+            }
+            else {
+                deviceTop = Math.floor((canvasHeight - targetDeviceHeight) / 2);
+            }
+            // Ensure device doesn't go off canvas
+            deviceTop = Math.floor(Math.max(0, Math.min(deviceTop, canvasHeight - targetDeviceHeight)));
         }
-        // Ensure device doesn't go off canvas
-        deviceTop = Math.floor(Math.max(captionHeight, Math.min(deviceTop, canvasHeight - targetDeviceHeight)));
         const deviceLeft = Math.floor((canvasWidth - targetDeviceWidth) / 2);
         if (verbose) {
             console.log(pc.dim(`      Position: ${framePosition} → top: ${deviceTop}px, left: ${deviceLeft}px`));
@@ -458,7 +569,21 @@ export async function composeAppStoreScreenshot(options) {
         const screenshotHeight = screenshotMeta.height || outputHeight;
         // Calculate available space for the screenshot
         const availableWidth = outputWidth;
-        const availableHeight = outputHeight - captionHeight;
+        let availableHeight;
+        let deviceTop;
+        if (captionPosition === 'above') {
+            availableHeight = outputHeight - captionHeight;
+            deviceTop = Math.floor(captionHeight);
+        }
+        else if (captionPosition === 'below') {
+            availableHeight = outputHeight - captionHeight;
+            deviceTop = 0; // Start from top when caption is below
+        }
+        else {
+            // 'overlay' positioning
+            availableHeight = outputHeight;
+            deviceTop = 0;
+        }
         // Calculate scale to fit within available space while maintaining aspect ratio
         const scaleX = availableWidth / screenshotWidth;
         const scaleY = availableHeight / screenshotHeight;
@@ -475,8 +600,11 @@ export async function composeAppStoreScreenshot(options) {
             })
                 .toBuffer();
         }
+        // For 'below' positioning, center the screenshot in the available device area
+        if (captionPosition === 'below') {
+            deviceTop = Math.floor((availableHeight - targetHeight) / 2);
+        }
         // Center the screenshot horizontally
-        const deviceTop = Math.floor(captionHeight);
         const deviceLeft = Math.floor((canvasWidth - targetWidth) / 2);
         composites.push({
             input: resizedScreenshot,
@@ -484,11 +612,169 @@ export async function composeAppStoreScreenshot(options) {
             left: Math.max(0, deviceLeft)
         });
     }
-    // Add overlay caption if specified (legacy support)
-    // Note: Caption rendering requires librsvg to be installed
+    // Add caption if positioned below the device
+    if (caption && captionPosition === 'below') {
+        try {
+            // Create simple SVG text
+            const isWatch = outputWidth < 500;
+            // Use device-specific caption size if provided
+            const baseFontSize = deviceConfig.captionSize || captionConfig.fontsize;
+            const fontSize = isWatch ? Math.min(36, baseFontSize) : baseFontSize; // Smaller font for watch
+            let svgText;
+            // Get caption box config
+            const captionBoxConfig = deviceConfig.captionBox || captionConfig.box || {};
+            const lineHeight = captionBoxConfig.lineHeight || 1.4;
+            if (captionLines.length === 0) {
+                // Fallback if no lines were calculated
+                captionLines = [caption];
+            }
+            // Use device-specific font if available, otherwise use global caption font
+            const fontToUse = deviceConfig.captionFont || captionConfig.font;
+            // Parse font name for style and weight
+            const parsedFont = parseFontName(fontToUse);
+            const fontFamily = getFontStack(parsedFont.family);
+            const fontStyle = parsedFont.style || 'normal';
+            const fontWeight = parsedFont.weight === 'bold' ? '700' : '400';
+            if (verbose) {
+                console.log(pc.dim('    Caption below device:'));
+                console.log(pc.dim(`      Font: ${fontToUse} → ${fontFamily}`));
+                if (parsedFont.style || parsedFont.weight) {
+                    console.log(pc.dim(`      Style: ${fontStyle}, Weight: ${fontWeight}`));
+                }
+            }
+            svgText = generateCaptionSVG(captionLines, canvasWidth, captionHeight, fontSize, fontFamily, fontStyle, fontWeight, captionConfig.color, lineHeight, captionConfig);
+            const captionImage = await sharp(Buffer.from(svgText))
+                .png()
+                .toBuffer();
+            // Position caption at bottom of canvas
+            const captionTop = canvasHeight - captionHeight;
+            composites.push({
+                input: captionImage,
+                top: captionTop,
+                left: 0
+            });
+        }
+        catch {
+            // If text rendering fails, just add transparent area at bottom
+            console.log('[INFO] Bottom caption rendering failed, reserving space');
+            const captionArea = await sharp({
+                create: {
+                    width: canvasWidth,
+                    height: captionHeight,
+                    channels: 4,
+                    background: { r: 0, g: 0, b: 0, alpha: 0 }
+                }
+            })
+                .png()
+                .toBuffer();
+            composites.push({
+                input: captionArea,
+                top: canvasHeight - captionHeight,
+                left: 0
+            });
+        }
+    }
+    // Add overlay caption if specified
     if (caption && captionPosition === 'overlay') {
-        // Skip caption rendering for now - would require librsvg
-        // TODO: Implement pure bitmap text rendering in future version
+        try {
+            // Create simple SVG text for overlay
+            const isWatch = outputWidth < 500;
+            const baseFontSize = deviceConfig.captionSize || captionConfig.fontsize;
+            const fontSize = isWatch ? Math.min(36, baseFontSize) : baseFontSize;
+            // Get caption box config
+            const captionBoxConfig = deviceConfig.captionBox || captionConfig.box || {};
+            const lineHeight = captionBoxConfig.lineHeight || 1.4;
+            // For overlay, use simple single line or basic wrapping
+            let overlayLines = [];
+            if (captionLines.length > 0) {
+                overlayLines = captionLines;
+            }
+            else {
+                // Simple fallback wrapping for overlay
+                const maxCharsPerLine = Math.floor(outputWidth / (fontSize * 0.6));
+                if (caption.length > maxCharsPerLine) {
+                    overlayLines = wrapText(caption, outputWidth, fontSize, 2); // Max 2 lines for overlay
+                }
+                else {
+                    overlayLines = [caption];
+                }
+            }
+            // Position overlay text based on padding settings
+            const textY = captionConfig.paddingTop + fontSize;
+            // Use device-specific font if available, otherwise use global caption font
+            const fontToUse = deviceConfig.captionFont || captionConfig.font;
+            // Parse font name for style and weight
+            const parsedFont = parseFontName(fontToUse);
+            const fontFamily = getFontStack(parsedFont.family);
+            const fontStyle = parsedFont.style || 'normal';
+            const fontWeight = parsedFont.weight === 'bold' ? '700' : '400';
+            if (verbose) {
+                console.log(pc.dim('    Overlay caption:'));
+                console.log(pc.dim(`      Font: ${fontToUse} → ${fontFamily}`));
+                console.log(pc.dim(`      Position: ${textY}px from top`));
+            }
+            // For overlay, we need custom SVG generation with background/border support
+            const svgElements = [];
+            // Add background rectangle if configured
+            const backgroundConfig = captionConfig.background;
+            const borderConfig = captionConfig.border;
+            if (backgroundConfig?.color) {
+                const bgPadding = backgroundConfig.padding || 20;
+                const bgOpacity = backgroundConfig.opacity || 0.8;
+                // Use full width minus margins for uniform appearance
+                const totalTextHeight = overlayLines.length * fontSize * lineHeight;
+                const sideMargin = 30; // Margin from edges
+                const bgWidth = canvasWidth - (sideMargin * 2);
+                const bgHeight = totalTextHeight + bgPadding * 2;
+                const bgX = sideMargin;
+                const bgY = textY - fontSize - bgPadding;
+                const bgRadius = borderConfig?.radius || 12; // Default to 12px for better visibility
+                svgElements.push(`<rect x="${bgX}" y="${bgY}" width="${bgWidth}" height="${bgHeight}" ` +
+                    `fill="${backgroundConfig.color}" opacity="${bgOpacity}" rx="${bgRadius}"/>`);
+            }
+            // Add border rectangle if configured
+            if (borderConfig?.color && borderConfig?.width) {
+                const bgPadding = backgroundConfig?.padding || 20;
+                const borderWidth = borderConfig.width;
+                const borderRadius = borderConfig.radius || 12;
+                const totalTextHeight = overlayLines.length * fontSize * lineHeight;
+                const sideMargin = 30; // Margin from edges
+                const rectWidth = canvasWidth - (sideMargin * 2);
+                const rectHeight = totalTextHeight + bgPadding * 2;
+                const rectX = sideMargin;
+                const rectY = textY - fontSize - bgPadding;
+                svgElements.push(`<rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" ` +
+                    `fill="none" stroke="${borderConfig.color}" stroke-width="${borderWidth}" rx="${borderRadius}"/>`);
+            }
+            // Add text elements
+            const textElements = overlayLines.map((line, index) => {
+                const y = textY + (index * fontSize * lineHeight);
+                return `<text x="${canvasWidth / 2}" y="${y}" ` +
+                    `font-family="${fontFamily}" ` +
+                    `font-size="${fontSize}" ` +
+                    `font-style="${fontStyle}" ` +
+                    `font-weight="${fontWeight}" ` +
+                    `fill="${captionConfig.color}" ` +
+                    `text-anchor="middle">${escapeXml(line)}</text>`;
+            });
+            svgElements.push(...textElements);
+            const svgText = `<svg width="${canvasWidth}" height="${canvasHeight}" xmlns="http://www.w3.org/2000/svg">
+        ${svgElements.join('\n        ')}
+      </svg>`;
+            const overlayImage = await sharp(Buffer.from(svgText))
+                .png()
+                .toBuffer();
+            // Add overlay caption on top of everything
+            composites.push({
+                input: overlayImage,
+                top: 0,
+                left: 0,
+                blend: 'over'
+            });
+        }
+        catch {
+            console.log('[INFO] Overlay caption rendering failed, skipping caption');
+        }
     }
     // Composite everything onto the gradient
     const result = await sharp(gradient)
@@ -497,6 +783,84 @@ export async function composeAppStoreScreenshot(options) {
         .toBuffer();
     return result;
 }
+/**
+ * Compose a framed device with a fully transparent background.
+ * No gradient or captions are applied; output is frame-sized.
+ */
+export async function composeFrameOnly(options) {
+    const { screenshot, frame, frameMetadata, outputFormat = 'png', jpegQuality = 92, verbose = false } = options;
+    if (!frame || !frameMetadata) {
+        throw new Error('composeFrameOnly requires a frame buffer and frame metadata');
+    }
+    const { frameWidth, frameHeight, screenRect } = frameMetadata;
+    if (verbose) {
+        console.log(pc.dim('Framing with transparent background:'));
+        if (frameMetadata.displayName || frameMetadata.name) {
+            console.log(pc.dim(`  Frame: ${frameMetadata.displayName || frameMetadata.name}`));
+        }
+        console.log(pc.dim(`  Frame size: ${frameWidth}x${frameHeight}`));
+        console.log(pc.dim(`  Screen rect: ${screenRect.width}x${screenRect.height} @ (${screenRect.x}, ${screenRect.y})`));
+    }
+    // Prepare screenshot to fit the frame's screen area
+    let resizedScreenshot = await sharp(screenshot)
+        .resize(screenRect.width, screenRect.height, { fit: 'fill' })
+        .toBuffer();
+    // Apply mask if available; otherwise add rounded corners for iPhone heuristically
+    let maskApplied = false;
+    if (frameMetadata.maskPath) {
+        try {
+            const maskBuffer = await fs.readFile(frameMetadata.maskPath);
+            const resizedMask = await sharp(maskBuffer)
+                .resize(screenRect.width, screenRect.height, { fit: 'fill' })
+                .toBuffer();
+            const screenshotRgb = await sharp(resizedScreenshot).removeAlpha().toBuffer();
+            const maskAlpha = await sharp(resizedMask).extractChannel('red').toBuffer();
+            resizedScreenshot = await sharp(screenshotRgb).joinChannel(maskAlpha).png().toBuffer();
+            maskApplied = true;
+        }
+        catch (err) {
+            if (verbose) {
+                console.warn(pc.dim(`  Mask load failed, falling back to rounded corners (if applicable): ${err instanceof Error ? err.message : String(err)}`));
+            }
+        }
+    }
+    if (!maskApplied && frameMetadata.deviceType === 'iphone') {
+        // Heuristic rounded corners for iPhone if mask missing
+        let cornerRadius;
+        const frameName = frameMetadata.displayName?.toLowerCase() || frameMetadata.name?.toLowerCase() || '';
+        if (frameName.includes('16 pro') || frameName.includes('15 pro') || frameName.includes('14 pro')) {
+            cornerRadius = Math.floor(screenRect.width * 0.12);
+        }
+        else if (frameName.includes('se') || frameName.includes('8')) {
+            cornerRadius = 0;
+        }
+        else {
+            cornerRadius = Math.floor(screenRect.width * 0.10);
+        }
+        if (cornerRadius > 0) {
+            resizedScreenshot = await applyRoundedCorners(resizedScreenshot, screenRect.width, screenRect.height, cornerRadius);
+        }
+    }
+    // Base transparent canvas sized to the frame
+    const base = sharp({
+        create: {
+            width: frameWidth,
+            height: frameHeight,
+            channels: 4,
+            background: { r: 0, g: 0, b: 0, alpha: 0 }
+        }
+    });
+    // Composite screenshot at screen coordinates, then overlay frame image
+    let composed = base.composite([
+        { input: resizedScreenshot, top: screenRect.y, left: screenRect.x },
+        { input: frame, top: 0, left: 0 }
+    ]);
+    if (outputFormat === 'png') {
+        return composed.png().toBuffer();
+    }
+    // JPEG cannot store alpha; flatten on white
+    return composed.flatten({ background: '#ffffff' }).jpeg({ quality: jpegQuality }).toBuffer();
+}
 /**
  * Create SVG for caption text
  */