Image Emoji Creator

/**
 * Creates a circular emoji-style image from a source image.
 * This involves cropping the image to a circle, resizing it,
 * and optionally applying color filters and a border.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} [size=128] The width and height of the output emoji canvas in pixels.
 * @param {string} [borderColor='rgba(0,0,0,0)'] The color of the border. Use any valid CSS color string. 'rgba(0,0,0,0)' means transparent.
 * @param {number} [borderWidth=0] The width of the border in pixels.
 * @param {number} [saturation=100] The saturation of the image as a percentage (e.g., 100 is unchanged, 0 is grayscale, 200 is double saturation).
 * @param {number} [contrast=100] The contrast of the image as a percentage (e.g., 100 is unchanged).
 * @returns {HTMLCanvasElement} A canvas element containing the generated emoji.
 */
function processImage(originalImg, size = 128, borderColor = 'rgba(0,0,0,0)', borderWidth = 0, saturation = 100, contrast = 100) {
    // Create a canvas to draw the emoji on.
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Canvas is not supported by your browser.';
        return errorDiv;
    }

    // --- 1. Draw the main image, clipped to a circle and filtered. ---
    ctx.save(); // Save the original context state

    // Apply color filters
    if (saturation !== 100 || contrast !== 100) {
        ctx.filter = `saturate(${saturation}%) contrast(${contrast}%)`;
    }

    // Create a circular clipping path
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip(); // All subsequent drawing will be clipped to this circle

    // Determine the source area of the image to draw to achieve a "cover" effect.
    // This crops the source image to a square from its center.
    const imgRatio = originalImg.width / originalImg.height;
    let sWidth = originalImg.width;
    let sHeight = originalImg.height;
    let sx = 0;
    let sy = 0;

    if (imgRatio > 1) { // Landscape image
        sWidth = originalImg.height;
        sx = (originalImg.width - sWidth) / 2;
    } else if (imgRatio < 1) { // Portrait image
        sHeight = originalImg.width;
        sy = (originalImg.height - sHeight) / 2;
    }

    // Draw the determined square portion of the source image onto the entire canvas.
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, size, size);

    ctx.restore(); // Restore the context, removing the clip and filter

    // --- 2. Draw the border on top of the clipped image. ---
    if (borderWidth > 0 && borderColor !== 'rgba(0,0,0,0)' && borderColor !== 'transparent') {
        ctx.beginPath();
        // The arc must be positioned in the middle of the border's width so it's drawn evenly on both sides.
        const radius = (size - borderWidth) / 2;
        ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2, true);
        ctx.lineWidth = borderWidth;
        ctx.strokeStyle = borderColor;
        ctx.stroke();
    }

    // Return the final canvas element.
    return canvas;
}