Image Chinese Scroll Painting Creator

function processImage(originalImg,
    scrollColor = '#f5f5dc', // Beige for paper
    rollerColor = '#8B4513', // SaddleBrown for wood
    topRollerHeight = 50,
    bottomRollerHeight = 70,
    rollerEndWidth = 30,    // Width of roller ends sticking out beyond paper
    imagePadding = 20,      // Padding on paper around the image itself
    titleText = '',         // Vertical title text, e.g., "山水清音"
    titleFont = "30px 'KaiTi', 'SimSun', 'STKaiti', 'PMingLiU', 'Heiti TC', 'LiSu', serif", // Font for title
    titleColor = '#000000', // Color for title
    sealText = '',          // Text for seal, e.g., "印" or "山人". Max 4 chars for default layout.
    sealColor = '#E80000',  // Red for seal background
    sealSize = 40           // Size of the seal square
) {

    // Ensure parameters are of correct type after getting defaults
    const p_scrollColor = String(scrollColor);
    const p_rollerColor = String(rollerColor);
    const p_topRollerHeight = Number(topRollerHeight);
    const p_bottomRollerHeight = Number(bottomRollerHeight);
    const p_rollerEndWidth = Number(rollerEndWidth);
    const p_imagePadding = Number(imagePadding);

    const p_titleText = String(titleText);
    const p_titleFont = String(titleFont);
    const p_titleColor = String(titleColor);
    const p_titleVerticalGap = 5; // Gap between characters in vertical title

    const p_sealText = String(sealText);
    const p_sealColor = String(sealColor);
    const p_sealSize = Number(sealSize);

    // Dynamically determine seal font size based on sealSize and number of characters
    let derivedSealFontSizeFactor = 0.55; // Default for 1-2 chars
    if (p_sealText.length > 2 && p_sealText.length <= 4) derivedSealFontSizeFactor = 0.35; // For 3-4 chars in a 2x2 grid
    else if (p_sealText.length > 4) derivedSealFontSizeFactor = 0.25; // For more chars, reduce further (though layout limited to 4 now)
    
    const derivedSealFontSize = Math.max(8, Math.floor(p_sealSize * derivedSealFontSizeFactor)); // Min 8px font
    const p_sealFont = `bold ${derivedSealFontSize}px 'KaiTi', 'SimSun', 'STKaiti', 'PMingLiU', 'Heiti TC', 'LiSu', serif`;


    // Helper function to lighten a hex color
    function _lightenColor(hex, percent) {
        hex = hex.replace(/^#/, '');
        const num = parseInt(hex, 16);
        const amt = Math.round(2.55 * percent);
        const R = Math.min(255, (num >> 16) + amt);
        const G = Math.min(255, (num >> 8 & 0x00FF) + amt);
        const B = Math.min(255, (num & 0x0000FF) + amt);
        return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
    }

    // Helper function to darken a hex color
    function _darkenColor(hex, percent) {
        hex = hex.replace(/^#/, '');
        const num = parseInt(hex, 16);
        const amt = Math.round(2.55 * percent);
        const R = Math.max(0, (num >> 16) - amt);
        const G = Math.max(0, (num >> 8 & 0x00FF) - amt);
        const B = Math.max(0, (num & 0x0000FF) - amt);
        return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
    }
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imageDisplayWidth = originalImg.width;
    const imageDisplayHeight = originalImg.height;

    // Calculate title dimensions
    let titleActualRenderWidth = 0;
    let titleActualRenderHeight = 0;
    let titleFontSize = 30; // Default, will be parsed from p_titleFont

    if (p_titleText) {
        ctx.font = p_titleFont;
        const fontMatch = p_titleFont.match(/(\d+)px/);
        if (fontMatch && fontMatch[1]) {
            titleFontSize = parseInt(fontMatch[1], 10);
        }
        const titleChars = p_titleText.split('');
        if (titleChars.length > 0) {
            let maxCharWidth = 0;
            titleChars.forEach(char => {
                const metrics = ctx.measureText(char);
                if (metrics.width > maxCharWidth) maxCharWidth = metrics.width;
            });
            titleActualRenderWidth = maxCharWidth;
            titleActualRenderHeight = titleChars.length * titleFontSize + Math.max(0, titleChars.length - 1) * p_titleVerticalGap;
        }
    }
    // Width needed for the title column, including some horizontal padding.
    const titleAreaRequiredWidth = p_titleText ? titleActualRenderWidth + 20 : 0;

    // Calculate dimensions for the "paper" part of the scroll
    // This is the area where image and title are drawn.
    const paperContentWidth = imageDisplayWidth + 2 * p_imagePadding + titleAreaRequiredWidth;
    const paperContentHeight = imageDisplayHeight + 2 * p_imagePadding;
    
    // Paper height must also accommodate the title if it's very long.
    const minPaperHeightForTitle = titleActualRenderHeight + 2 * p_imagePadding;
    const finalPaperHeight = Math.max(paperContentHeight, minPaperHeightForTitle);

    // Canvas final dimensions
    canvas.width = paperContentWidth + 2 * p_rollerEndWidth;
    canvas.height = finalPaperHeight + p_topRollerHeight + p_bottomRollerHeight;

    // Coordinates for the paper rectangle
    const paperX = p_rollerEndWidth;
    const paperY = p_topRollerHeight;
    const paperDrawableWidth = paperContentWidth; // The width of the "paper" excluding roller ends
    const paperDrawableHeight = finalPaperHeight; // The height of the "paper"

    // 1. Draw scroll paper background
    ctx.fillStyle = p_scrollColor;
    ctx.fillRect(paperX, paperY, paperDrawableWidth, paperDrawableHeight);
    
    // Optional: A thin border for the paper area
    ctx.strokeStyle = _darkenColor(p_scrollColor, 15);
    ctx.lineWidth = 1;
    ctx.strokeRect(paperX, paperY, paperDrawableWidth, paperDrawableHeight);

    // Helper function to draw roller ends (caps)
    function _drawRollerEndCap(x, y, radius, baseColor) {
        ctx.fillStyle = _darkenColor(baseColor, 30); // Darkest part for depth
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.fillStyle = baseColor; // Main color
        ctx.beginPath();
        ctx.arc(x, y, radius * 0.9, 0, 2 * Math.PI);
        ctx.fill();

        // Highlight on the cap
        const highlightGradient = ctx.createRadialGradient(
            x - radius * 0.3, y - radius * 0.3, radius * 0.1,
            x, y, radius * 0.8
        );
        highlightGradient.addColorStop(0, _lightenColor(baseColor, 40));
        highlightGradient.addColorStop(0.5, _lightenColor(baseColor, 20));
        highlightGradient.addColorStop(1, baseColor);
        
        ctx.fillStyle = highlightGradient;
        ctx.beginPath();
        ctx.arc(x, y, radius * 0.85, 0, 2 * Math.PI);
        ctx.fill();
    }


    // 2. Draw Top Roller
    ctx.fillStyle = p_rollerColor;
    ctx.fillRect(0, 0, canvas.width, p_topRollerHeight);
    // Shading for 3D effect on roller body
    ctx.fillStyle = 'rgba(0,0,0,0.15)'; 
    ctx.fillRect(0, p_topRollerHeight - Math.min(5, p_topRollerHeight * 0.1), canvas.width, Math.min(5, p_topRollerHeight * 0.1)); 
    ctx.fillStyle = 'rgba(255,255,255,0.15)';
    ctx.fillRect(0, 0, canvas.width, Math.min(5, p_topRollerHeight * 0.1));
    // Draw top roller end caps
    _drawRollerEndCap(p_rollerEndWidth / 2, p_topRollerHeight / 2, p_topRollerHeight * 0.4, p_rollerColor);
    _drawRollerEndCap(canvas.width - p_rollerEndWidth / 2, p_topRollerHeight / 2, p_topRollerHeight * 0.4, p_rollerColor);


    // 3. Draw Bottom Roller
    ctx.fillStyle = p_rollerColor;
    ctx.fillRect(0, canvas.height - p_bottomRollerHeight, canvas.width, p_bottomRollerHeight);
    // Shading for 3D effect on roller body
    ctx.fillStyle = 'rgba(0,0,0,0.15)';
    ctx.fillRect(0, canvas.height - p_bottomRollerHeight, canvas.width, Math.min(5, p_bottomRollerHeight * 0.1));
    ctx.fillStyle = 'rgba(255,255,255,0.15)';
    ctx.fillRect(0, canvas.height - Math.min(5, p_bottomRollerHeight * 0.1), canvas.width, Math.min(5, p_bottomRollerHeight * 0.1));
    // Draw bottom roller end caps
    _drawRollerEndCap(p_rollerEndWidth / 2, canvas.height - p_bottomRollerHeight / 2, p_bottomRollerHeight * 0.4, p_rollerColor);
    _drawRollerEndCap(canvas.width - p_rollerEndWidth / 2, canvas.height - p_bottomRollerHeight / 2, p_bottomRollerHeight * 0.4, p_rollerColor);


    // Coordinates for drawing the image onto the paper
    const imgDrawX = paperX + p_imagePadding;
    const imgDrawY = paperY + p_imagePadding;

    // 4. Draw Image
    ctx.drawImage(originalImg, imgDrawX, imgDrawY, imageDisplayWidth, imageDisplayHeight);

    // 5. Draw Title (Vertical, to the right of the image)
    let lastTitleCharBaselineY = 0;
    if (p_titleText) {
        ctx.font = p_titleFont;
        ctx.fillStyle = p_titleColor;
        ctx.textAlign = 'center'; 
        ctx.textBaseline = 'alphabetic'; // Default, good for vertical stacking by baseline
        
        const titleChars = p_titleText.split('');
        const titleColumnX = imgDrawX + imageDisplayWidth + p_imagePadding + (titleAreaRequiredWidth - p_imagePadding / 2); // Center in allocated title area

        let firstCharBaselineY = imgDrawY + titleFontSize;
        if (titleActualRenderHeight < imageDisplayHeight) { // Center title vertically against image height if shorter
            firstCharBaselineY = imgDrawY + (imageDisplayHeight - titleActualRenderHeight) / 2 + titleFontSize;
        }
        // Ensure title starts within the paper's padded area
        firstCharBaselineY = Math.max(firstCharBaselineY, paperY + p_imagePadding + titleFontSize);
        
        let currentY = firstCharBaselineY;
        for (let i = 0; i < titleChars.length; i++) {
            ctx.fillText(titleChars[i], titleColumnX, currentY);
            lastTitleCharBaselineY = currentY;
            currentY += titleFontSize + p_titleVerticalGap;
        }
    }

    // 6. Draw Seal
    if (p_sealText) {
        let sealX, sealY;

        // Default position: bottom right of the image, potentially overlapping slightly
        sealX = imgDrawX + imageDisplayWidth - p_sealSize - 5; // 5px offset from image edge
        sealY = imgDrawY + imageDisplayHeight - p_sealSize - 5; // 5px offset

        if (p_titleText && lastTitleCharBaselineY > 0) {
            // If title exists, place seal below the title column
            const titleColumnX = imgDrawX + imageDisplayWidth + p_imagePadding + (titleAreaRequiredWidth - p_imagePadding / 2);
            sealX = titleColumnX - p_sealSize / 2; // Center seal horizontally with title column
            sealY = lastTitleCharBaselineY + titleFontSize * 0.2 + 10; // Below last title char + small gap
        }

        // Clamp seal position to be mostly within the paper boundaries
        sealX = Math.max(paperX + p_imagePadding, Math.min(sealX, paperX + paperDrawableWidth - p_imagePadding - p_sealSize));
        sealY = Math.max(paperY + p_imagePadding, Math.min(sealY, paperY + paperDrawableHeight - p_imagePadding - p_sealSize));
        
        ctx.fillStyle = p_sealColor;
        ctx.fillRect(sealX, sealY, p_sealSize, p_sealSize);

        // Seal text: usually "relief" carving (陽刻), so text is paper color.
        // For simplicity, use a light contrasting color or paper color.
        // If paper is light, then this works. If paper is dark, text should be light.
        const sealTextColor = _lightenColor(p_scrollColor,parseInt(p_scrollColor.substring(1,3),16) < 128 ? 70 : -10); // Lighter if paper dark, slightly darker if paper light
        ctx.fillStyle = sealTextColor;
        ctx.font = p_sealFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        const sealChars = p_sealText.split('');
        const numChars = sealChars.length;

        // Layout seal characters (traditional Chinese: columns right-to-left, text top-to-bottom)
        if (numChars === 1) {
            ctx.fillText(sealChars[0], sealX + p_sealSize / 2, sealY + p_sealSize / 2);
        } else if (numChars === 2) { // Two chars, arranged vertically (top char is first)
            ctx.fillText(sealChars[0], sealX + p_sealSize / 2, sealY + p_sealSize * 0.30); 
            ctx.fillText(sealChars[1], sealX + p_sealSize / 2, sealY + p_sealSize * 0.70);
        } else if (numChars === 3) { // Three chars: 1 right col, 2 left col OR 1 top, 2 bottom.
                                     // Using 1 top center, 2 bottom R/L (less trad, but fits square)
            ctx.fillText(sealChars[0], sealX + p_sealSize / 2, sealY + p_sealSize * 0.30);    // Top Center
            ctx.fillText(sealChars[1], sealX + p_sealSize * 0.30, sealY + p_sealSize * 0.70); // Bottom Left
            ctx.fillText(sealChars[2], sealX + p_sealSize * 0.70, sealY + p_sealSize * 0.70); // Bottom Right
        } else if (numChars >= 4) { // Four chars: 2x2 grid. Traditional: TopRight, TopLeft, BottomRight, BottomLeft
            ctx.fillText(sealChars[0], sealX + p_sealSize * 0.70, sealY + p_sealSize * 0.30); // Top-Right
            ctx.fillText(sealChars[1], sealX + p_sealSize * 0.30, sealY + p_sealSize * 0.30); // Top-Left
            if (numChars > 2) ctx.fillText(sealChars[2], sealX + p_sealSize * 0.70, sealY + p_sealSize * 0.70); // Bottom-Right
            if (numChars > 3) ctx.fillText(sealChars[3], sealX + p_sealSize * 0.30, sealY + p_sealSize * 0.70); // Bottom-Left
        }
        
        // Add a thin border to the seal itself
        ctx.strokeStyle = _darkenColor(p_sealColor, 30); 
        ctx.lineWidth = Math.max(1, p_sealSize * 0.03); // Proportional border for seal
        ctx.strokeRect(sealX, sealY, p_sealSize, p_sealSize);
    }
    
    return canvas;
}