YouTube Photo Drag And Drop Uploader

function processImage(originalImg, photoType = 'thumbnail', fillMode = 'cover', showGuide = 'false') {
    let width, height;
    
    // Determine the target dimensions based on the YouTube photo type
    switch(photoType.toLowerCase()) {
        case 'banner':
            width = 2560;
            height = 1440;
            break;
        case 'profile':
            width = 800;
            height = 800;
            break;
        case 'thumbnail':
        default:
            width = 1280;
            height = 720;
            break;
    }

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Fill background with black to avoid transparent edges in 'contain' mode
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, width, height);

    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    const scaleX = width / imgWidth;
    const scaleY = height / imgHeight;

    let scale;
    if (fillMode.toLowerCase() === 'contain') {
        scale = Math.min(scaleX, scaleY);
    } else { // default to 'cover'
        scale = Math.max(scaleX, scaleY);
    }

    // Calculate dimensions and position to draw the image centered
    const dw = imgWidth * scale;
    const dh = imgHeight * scale;
    const dx = (width - dw) / 2;
    const dy = (height - dh) / 2;

    ctx.drawImage(originalImg, dx, dy, dw, dh);

    // Optionally overlay safe zone guides for YouTube assets
    if (showGuide.toString().toLowerCase() === 'true') {
        if (photoType.toLowerCase() === 'banner') {
            const safeW = 1546;
            const safeH = 423;
            const safeX = (width - safeW) / 2;
            const safeY = (height - safeH) / 2;
            
            // Darken the areas outside the all-device safe zone
            ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
            ctx.fillRect(0, 0, width, safeY);
            ctx.fillRect(0, safeY + safeH, width, height - (safeY + safeH));
            ctx.fillRect(0, safeY, safeX, safeH);
            ctx.fillRect(safeX + safeW, safeY, width - (safeX + safeW), safeH);

            // Safe area for all devices
            ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
            ctx.lineWidth = 4;
            ctx.strokeRect(safeX, safeY, safeW, safeH);
            
            ctx.fillStyle = 'rgba(0, 255, 0, 0.8)';
            ctx.font = 'bold 32px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('Safe Area for Text & Logos (Mobile/All)', width / 2, safeY - 10);
            
            // Desktop safe area
            ctx.strokeStyle = 'rgba(255, 200, 0, 0.5)';
            ctx.strokeRect(0, safeY, width, safeH);
            ctx.fillStyle = 'rgba(255, 200, 0, 0.8)';
            ctx.fillText('Desktop Area', safeX / 2, safeY + safeH - 10);
            
        } else if (photoType.toLowerCase() === 'profile') {
            // Darken areas outside the circular profile crop
            ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
            ctx.beginPath();
            ctx.rect(0, 0, width, height);
            ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2, true);
            ctx.fill();

            // Draw circle mask guide
            ctx.beginPath();
            ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2);
            ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
            ctx.lineWidth = 4;
            ctx.stroke();
            
            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
            ctx.font = 'bold 32px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('YouTube Profile Crop', width / 2, height / 2);

        } else if (photoType.toLowerCase() === 'thumbnail') {
            // Draw a simple border for the thumbnail
            ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
            ctx.lineWidth = 8;
            ctx.strokeRect(0, 0, width, height);
            ctx.fillStyle = 'rgba(0, 255, 0, 0.9)';
            ctx.font = 'bold 36px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('Thumbnail (1280 x 720)', width / 2, 20);
        }
    }

    return canvas;
}