Image Dental Analysis Tool

/**
 * Analyzes an image of teeth by highlighting potential stains and overlaying dental aesthetic guides.
 * This function is for illustrative purposes and does not provide a medical diagnosis.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} guideColor The color of the aesthetic guide lines in a CSS format (e.g., 'rgba(255, 0, 0, 0.7)').
 * @param {string} highlightColor The color used to highlight potential stains, in CSS RGBA format (e.g., 'rgba(255, 255, 0, 0.3)').
 * @param {number} sensitivity A numeric value (e.g., 20-60) to control the sensitivity of stain detection. A higher value detects only more intense stains.
 * @returns {HTMLCanvasElement} A new canvas element with the analysis drawn on it.
 */
async function processImage(originalImg, guideColor = 'rgba(255, 0, 0, 0.7)', highlightColor = 'rgba(255, 255, 0, 0.3)', sensitivity = 40) {

    // 1. Create a canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the image and draw the image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Perform Color Analysis to highlight potential stains.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Parse the highlight color string into RGBA components.
    let h_r, h_g, h_b, h_a;
    try {
        // Create a temporary element to let the browser parse the color for us.
        const tempDiv = document.createElement('div');
        tempDiv.style.color = highlightColor;
        document.body.appendChild(tempDiv); // Element must be in the DOM for getComputedStyle
        const computedColor = window.getComputedStyle(tempDiv).color;
        document.body.removeChild(tempDiv);
        
        const colorParts = computedColor.match(/\d+(\.\d+)?/g).map(Number);
        h_r = colorParts[0];
        h_g = colorParts[1];
        h_b = colorParts[2];
        h_a = colorParts.length > 3 ? colorParts[3] : 1.0;
    } catch (e) {
        // Fallback to a default yellow if parsing fails.
        [h_r, h_g, h_b, h_a] = [255, 255, 0, 0.3];
        console.error("Failed to parse highlightColor, using default.", e);
    }


    // Iterate over each pixel in the image data.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // A heuristic to detect yellowish, off-white colors typical of teeth,
        // while trying to avoid skin, lips, or gums.
        const isBright = r > 120 && g > 120 && b > 80;
        const isNotTooRedOrGreen = Math.abs(r - g) < 50;
        const isYellowish = ((r + g) / 2 - b) > sensitivity;

        if (isBright && isNotTooRedOrGreen && isYellowish) {
            // Apply the highlight color using alpha blending.
            // new_color = old_color * (1 - alpha) + highlight_color * alpha
            data[i] = r * (1 - h_a) + h_r * h_a;     // Red
            data[i + 1] = g * (1 - h_a) + h_g * h_a; // Green
            data[i + 2] = b * (1 - h_a) + h_b * h_a; // Blue
        }
    }

    // 4. Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // 5. Draw Dental Aesthetic Guides on top of the processed image.
    const w = canvas.width;
    const h = canvas.height;

    ctx.strokeStyle = guideColor;
    ctx.lineWidth = Math.max(2, w / 350); // Make line width responsive to image size.
    ctx.setLineDash([10, 10]); // Dashed lines for a technical look.
    ctx.lineCap = 'round';

    // Draw a vertical line for the facial midline.
    ctx.beginPath();
    ctx.moveTo(w / 2, 0);
    ctx.lineTo(w / 2, h);
    ctx.stroke();

    // Draw a curved line to represent an ideal smile arc.
    ctx.beginPath();
    ctx.moveTo(0, h * 0.55);
    ctx.quadraticCurveTo(w / 2, h * 0.5, w, h * 0.55);
    ctx.stroke();

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