WordPress Image Support Tool

function processImage(originalImg, targetSize = 'medium', outputFormat = 'webp', quality = 0.8) {
    // Ensure properly sanitized parameters
    targetSize = String(targetSize).toLowerCase();
    outputFormat = String(outputFormat).toLowerCase();
    quality = parseFloat(quality);
    if (isNaN(quality) || quality <= 0 || quality > 1) quality = 0.8;

    const sw = originalImg.naturalWidth || originalImg.width;
    const sh = originalImg.naturalHeight || originalImg.height;

    let targetW, targetH, isHardCrop;

    // Map to standard WordPress media sizes
    switch (targetSize) {
        case 'thumbnail':
            targetW = 150; 
            targetH = 150; 
            isHardCrop = true; 
            break;
        case 'medium':
            targetW = 300; 
            targetH = 300; 
            isHardCrop = false; 
            break;
        case 'medium_large':
            targetW = 768; 
            targetH = 768; 
            isHardCrop = false; 
            break;
        case 'large':
            targetW = 1024; 
            targetH = 1024; 
            isHardCrop = false; 
            break;
        case 'featured': // Standard modern WP featured/Open Graph size
            targetW = 1200; 
            targetH = 630; 
            isHardCrop = true; 
            break;
        case 'full':
        default:
            targetSize = 'full';
            targetW = sw; 
            targetH = sh; 
            isHardCrop = false; 
            break;
    }

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

    // Handle cropping and scaling identical to WordPress default behavior
    if (isHardCrop) {
        canvas.width = targetW;
        canvas.height = targetH;
        const scale = Math.max(targetW / sw, targetH / sh);
        const nw = sw * scale;
        const nh = sh * scale;
        const dx = (targetW - nw) / 2;
        const dy = (targetH - nh) / 2;
        
        ctx.fillStyle = outputFormat === 'png' ? 'rgba(0,0,0,0)' : '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImg, dx, dy, nw, nh);
    } else {
        let scale = Math.min(targetW / sw, targetH / sh);
        if (scale > 1) scale = 1; // WordPress avoids upscaling standard media sizes
        
        canvas.width = Math.max(1, Math.round(sw * scale));
        canvas.height = Math.max(1, Math.round(sh * scale));
        
        ctx.fillStyle = outputFormat === 'png' ? 'rgba(0,0,0,0)' : '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    }

    // Determine correct mimetype
    let mimeType = 'image/webp';
    let ext = 'webp';
    if (outputFormat === 'jpeg' || outputFormat === 'jpg') {
        mimeType = 'image/jpeg';
        ext = 'jpg';
    } else if (outputFormat === 'png') {
        mimeType = 'image/png';
        ext = 'png';
    }

    const dataUrl = canvas.toDataURL(mimeType, quality);

    // Build standard WordPress-themed display container
    const container = document.createElement('div');
    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
    container.style.background = '#f1f1f1';
    container.style.border = '1px solid #ccd0d4';
    container.style.padding = '20px';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';
    container.style.borderRadius = '3px';
    container.style.textAlign = 'left';
    
    const title = document.createElement('h3');
    const sizeFormatName = targetSize.charAt(0).toUpperCase() + targetSize.slice(1).replace('_', ' ');
    title.innerText = `WordPress Ready Image (${sizeFormatName})`;
    title.style.margin = '0 0 8px 0';
    title.style.color = '#1d2327';
    title.style.fontWeight = '600';
    title.style.fontSize = '18px';
    
    const info = document.createElement('p');
    // Approximate file size logic for data URLs (accounting for base64 bloat)
    const kbSize = Math.round((dataUrl.length * (3/4)) / 1024);
    info.innerText = `Dimensions: ${canvas.width} × ${canvas.height} px | Format: ${ext.toUpperCase()} | Approx File Size: ${kbSize} KB`;
    info.style.fontSize = '13px';
    info.style.color = '#50575e';
    info.style.margin = '0 0 15px 0';
    info.style.lineHeight = '1.5';
    
    const imgWrapper = document.createElement('div');
    imgWrapper.style.background = 'url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZWRlZGVkIiAvPjxyZWN0IHg9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNmZmZmZmYiIC8+PHJlY3QgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZmZmZiIgLz48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VkZWRlZCIgLz48L3N2Zz4=")';
    imgWrapper.style.display = 'inline-block';
    imgWrapper.style.border = '1px solid #c3c4c7';
    imgWrapper.style.boxShadow = '0 1px 1px rgba(0,0,0,0.04)';
    
    const imgDisplay = document.createElement('img');
    imgDisplay.src = dataUrl;
    imgDisplay.style.maxWidth = '100%';
    imgDisplay.style.height = 'auto';
    imgDisplay.style.display = 'block';
    imgDisplay.style.maxHeight = '400px';

    imgWrapper.appendChild(imgDisplay);

    const actionDiv = document.createElement('div');
    actionDiv.style.marginTop = '15px';

    const dlBtn = document.createElement('a');
    dlBtn.innerText = 'Download for WP';
    dlBtn.href = dataUrl;
    dlBtn.download = `wp-${targetSize}.${ext}`;
    dlBtn.style.display = 'inline-block';
    dlBtn.style.padding = '5px 12px';
    dlBtn.style.background = '#2271b1';
    dlBtn.style.color = '#fff';
    dlBtn.style.textDecoration = 'none';
    dlBtn.style.borderRadius = '3px';
    dlBtn.style.fontSize = '13px';
    dlBtn.style.lineHeight = '2.15384615';
    dlBtn.style.minHeight = '30px';
    dlBtn.style.boxSizing = 'border-box';
    dlBtn.style.cursor = 'pointer';

    dlBtn.onmouseover = () => dlBtn.style.background = '#135e96';
    dlBtn.onmouseout = () => dlBtn.style.background = '#2271b1';

    actionDiv.appendChild(dlBtn);

    container.appendChild(title);
    container.appendChild(info);
    container.appendChild(imgWrapper);
    container.appendChild(actionDiv);

    return container;
}