Base64 To Image Converter

async function processImage(originalImg, base64Input = "", mimeTypeIfRaw = "image/png") {
    // originalImg is a mandatory first parameter as per specification,
    // but it's not used in this specific "Base64 To Image" tool.

    return new Promise((resolve) => {
        if (!base64Input || typeof base64Input !== 'string' || base64Input.trim() === "") {
            console.error("Error: Base64 input is missing, not a string, or empty.");
            const errorCanvas = document.createElement('canvas');
            errorCanvas.width = 350;
            errorCanvas.height = 120;
            const ctx = errorCanvas.getContext('2d');
            ctx.fillStyle = '#f8f9fa'; // Light gray background
            ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
            ctx.fillStyle = 'red';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Invalid Input', errorCanvas.width / 2, 30);
            ctx.font = '14px Arial';
            ctx.fillText('Base64 input must be a non-empty string.', errorCanvas.width / 2, 60);
            ctx.fillText('Please provide valid Base64 data.', errorCanvas.width / 2, 85);
            resolve(errorCanvas);
            return;
        }

        let dataUrl;
        // Check if the input is already a data URL
        if (base64Input.startsWith('data:image/')) {
            dataUrl = base64Input;
        } else {
            // Input is treated as raw Base64 content; combine with mimeTypeIfRaw
            if (typeof mimeTypeIfRaw !== 'string' || !mimeTypeIfRaw.startsWith('image/')) {
                console.error("Error: MIME type is not a string or not a valid image MIME type for raw Base64 data.");
                const errorCanvas = document.createElement('canvas');
                errorCanvas.width = 350;
                errorCanvas.height = 120;
                const ctx = errorCanvas.getContext('2d');
                ctx.fillStyle = '#f8f9fa';
                ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
                ctx.fillStyle = 'red';
                ctx.font = 'bold 16px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('Invalid MIME Type', errorCanvas.width / 2, 30);
                ctx.font = '14px Arial';
                ctx.fillText('Valid image MIME type (e.g., image/png)', errorCanvas.width / 2, 60);
                ctx.fillText('is required if input is raw Base64 data.', errorCanvas.width / 2, 85);
                resolve(errorCanvas);
                return;
            }
            dataUrl = `data:${mimeTypeIfRaw};base64,${base64Input}`;
        }

        const img = new Image();

        img.onload = () => {
            // Successfully loaded the image
            resolve(img);
        };

        img.onerror = (err) => {
            console.error("Error loading image from Base64 data. Attempted data URL:", dataUrl, "Error:", err);
            const errorCanvas = document.createElement('canvas');
            errorCanvas.width = 380; // Slightly wider for more detailed message
            errorCanvas.height = 150;
            const ctx = errorCanvas.getContext('2d');
            ctx.fillStyle = '#f8f9fa';
            ctx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
            ctx.fillStyle = 'red';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Image Load Error', errorCanvas.width / 2, 30);
            ctx.font = '14px Arial';
            ctx.fillText('Failed to load image from the  Base64 string.', errorCanvas.width / 2, 60);
            ctx.fillText('Ensure Base64 data is valid and not malformed.', errorCanvas.width / 2, 85);
            ctx.fillText('If providing raw Base64, check MIME type.', errorCanvas.width / 2, 110);
            resolve(errorCanvas);
        };

        img.src = dataUrl;
    });
}