Image Emoji Overlay Tool

function processImage(originalImg, emojiCharacter = "😊", emojiSize = 50, positionX = "center", positionY = "center") {
    const canvas = document.createElement('canvas');

    // Use naturalWidth and naturalHeight for the intrinsic dimensions of the image.
    // It's assumed that originalImg is a loaded HTMLImageElement.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has no dimensions or is not loaded. Returning a 0x0 canvas.");
        canvas.width = 0; // Set canvas to 0x0 to indicate failure due to image dimensions
        canvas.height = 0;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    if (!ctx) {
        console.error("Failed to get 2D context from canvas. Returning canvas without drawing (it will be blank but sized like the original image).");
        // Canvas width/height are set, but we can't draw on it.
        return canvas;
    }

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing the original image onto the canvas:", e);
        // Return the canvas, which might be blank or partially drawn if error occurred mid-draw.
        // For robustness, could clearRect here, but typically drawImage on a loaded image is safe.
        return canvas;
    }

    // Validate and prepare parameters for drawing the emoji
    const finalEmojiCharacter = String(emojiCharacter); // Ensure it's a string

    let parsedEmojiSize = Number(emojiSize);
    if (isNaN(parsedEmojiSize) || parsedEmojiSize <= 0) {
        console.warn(`Invalid emojiSize "${emojiSize}". Defaulting to 50px.`);
        parsedEmojiSize = 50;
    }
    const finalEmojiSize = parsedEmojiSize;

    let actualX;
    if (positionX === "center") {
        actualX = imgWidth / 2;
    } else {
        actualX = Number(positionX);
        if (isNaN(actualX)) {
            console.warn(`Invalid positionX "${positionX}". Defaulting to center (${imgWidth / 2}px).`);
            actualX = imgWidth / 2;
        }
    }

    let actualY;
    if (positionY === "center") {
        actualY = imgHeight / 2;
    } else {
        actualY = Number(positionY);
        if (isNaN(actualY)) {
            console.warn(`Invalid positionY "${positionY}". Defaulting to center (${imgHeight / 2}px).`);
            actualY = imgHeight / 2;
        }
    }

    // Set emoji style
    // Using a generic font family like "sans-serif" allows the browser
    // to pick a suitable system font that supports the emoji character.
    ctx.font = `${finalEmojiSize}px sans-serif`;
    ctx.textAlign = 'center'; // Center the emoji horizontally on actualX
    ctx.textBaseline = 'middle'; // Center the emoji vertically on actualY

    // Draw the emoji
    ctx.fillText(finalEmojiCharacter, actualX, actualY);

    return canvas;
}