Image Product Review Tool

/**
 * Overlays a product review interface onto an image.
 * This function takes an image and adds a semi-transparent overlay at the bottom
 * containing a star rating, review text, and reviewer information.
 *
 * @param {Image} originalImg The original product image object.
 * @param {number} rating The star rating for the product (from 0 to 5). Default is 4.5.
 * @param {string} reviewText A short headline for the review. Default is "Amazing Product!".
 * @param {string} reviewerName The name of the reviewer. Default is "Jane Doe".
 * @param {string} themeColor The hex color for accents like stars and the avatar background. Default is "#FFD700".
 * @param {string} textColor The hex color for the text. Default is "#FFFFFF".
 * @param {string} backgroundColor The color of the semi-transparent overlay. Default is "rgba(0, 0, 0, 0.6)".
 * @returns {HTMLCanvasElement} A canvas element with the review overlay applied.
 */
function processImage(originalImg, rating = 4.5, reviewText = "Amazing Product!", reviewerName = "Jane Doe", themeColor = "#FFD700", textColor = "#FFFFFF", backgroundColor = "rgba(0, 0, 0, 0.6)") {
    // 1. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Layout Constants
    const overlayHeight = Math.max(h * 0.30, 150); // Minimum height of 150px
    const overlayY = h - overlayHeight;
    const padding = w * 0.04;

    // 3. Draw Overlay
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, overlayY, w, overlayHeight);

    // Helper function to draw a star
    const drawStar = (cx, cy, spikes, outerRadius, innerRadius) => {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        const step = Math.PI / spikes;
        ctx.beginPath();
        ctx.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            ctx.lineTo(x, y);
            rot += step;
            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            ctx.lineTo(x, y);
            rot += step;
        }
        ctx.lineTo(cx, cy - outerRadius);
        ctx.closePath();
    };

    // 4. Draw Stars (Left Side)
    const clampedRating = Math.max(0, Math.min(5, rating));
    const starSize = Math.min(overlayHeight * 0.15, 25);
    const starY = overlayY + padding + starSize;
    const starSpacing = starSize * 2.5;
    const fullStars = Math.floor(clampedRating);
    const hasHalfStar = (clampedRating % 1) >= 0.4;

    for (let i = 0; i < 5; i++) {
        const starX = padding + starSize + (i * starSpacing);
        if (i < fullStars) {
            ctx.fillStyle = themeColor;
            drawStar(starX, starY, 5, starSize, starSize / 2);
            ctx.fill();
        } else if (i === fullStars && hasHalfStar) {
            ctx.strokeStyle = themeColor;
            ctx.lineWidth = 2;
            drawStar(starX, starY, 5, starSize, starSize / 2);
            ctx.stroke();
            ctx.save();
            ctx.beginPath();
            ctx.rect(starX - starSize - 1, starY - starSize - 1, starSize + 1, (starSize * 2) + 2);
            ctx.clip();
            ctx.fillStyle = themeColor;
            drawStar(starX, starY, 5, starSize, starSize / 2);
            ctx.fill();
            ctx.restore();
        } else {
            ctx.strokeStyle = themeColor;
            ctx.lineWidth = 2;
            drawStar(starX, starY, 5, starSize, starSize / 2);
            ctx.stroke();
        }
    }

    // 5. Draw Review Text (Left Side, under stars)
    const reviewTextY = starY + starSize + padding / 2;
    const reviewFontSize = Math.min(overlayHeight * 0.25, 40, w * 0.06);
    ctx.fillStyle = textColor;
    ctx.font = `bold ${reviewFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    const availableTextWidth = w - padding * 2;
    ctx.fillText(reviewText, padding, reviewTextY, availableTextWidth);

    // 6. Draw Avatar (Right Side)
    const avatarRadius = Math.min(overlayHeight * 0.25, 40);
    const avatarX = w - padding - avatarRadius;
    const avatarY = overlayY + overlayHeight / 2;

    const nameParts = reviewerName.trim().split(/\s+/);
    const initials = (nameParts.length > 1 && nameParts[0] && nameParts[nameParts.length-1] ?
        nameParts[0].charAt(0) + nameParts[nameParts.length - 1].charAt(0) :
        (nameParts[0] ? nameParts[0].charAt(0) : '')) || '';

    ctx.fillStyle = themeColor;
    ctx.beginPath();
    ctx.arc(avatarX, avatarY, avatarRadius, 0, Math.PI * 2);
    ctx.fill();

    const r = parseInt(themeColor.substring(1, 3), 16);
    const g = parseInt(themeColor.substring(3, 5), 16);
    const b = parseInt(themeColor.substring(5, 7), 16);
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
    const initialColor = brightness > 125 ? '#000000' : '#FFFFFF';

    ctx.fillStyle = initialColor;
    const initialFontSize = avatarRadius;
    ctx.font = `bold ${initialFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(initials.toUpperCase(), avatarX, avatarY + 2);

    // 7. Draw Reviewer Name (Right side, left of avatar)
    const nameFontSize = Math.min(overlayHeight * 0.18, 28, w * 0.04);
    const nameX = avatarX - avatarRadius - (padding / 2);
    ctx.fillStyle = textColor;
    ctx.font = `${nameFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    const availableNameWidth = nameX - (padding + starSize + (4 * starSpacing) + starSize) - padding;
    ctx.fillText(reviewerName, nameX, avatarY, Math.max(0, availableNameWidth));

    // 8. Return Canvas
    return canvas;
}