Image Obsidian Shine Filter Effect

function processImage(originalImg, shadowMapThreshold = 80, highlightMapThreshold = 180, obsidianBaseColorStr = "10,10,15", obsidianMidToneColorStr = "35,35,50", obsidianHighlightColorStr = "200,200,220") {
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height if available (image properly loaded and has intrinsic dimensions), 
    // otherwise fall back to width/height (might be set by CSS or attributes).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    if (!ctx) {
        console.error("Canvas 2D context is not supported. Returning an empty canvas.");
        // Return the empty canvas as per requirement to return a canvas
        return canvas;
    }
    
    // If image dimensions are zero, it might mean image not loaded or is invalid.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image dimensions are zero. An empty canvas will be returned.");
        // The canvas is already 0x0 or correctly sized but there's nothing to draw.
        return canvas;
    }

    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing the image onto the canvas. This could be due to an invalid image object.", e);
        // Return a canvas, which might be blank or partially drawn depending on when error occurred.
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data. This might be due to CORS policy if the image is from another domain. Returning canvas with original image drawn.", e);
        // As per requirements, return a canvas. In this case, one with the original image drawn.
        return canvas;
    }

    const data = imageData.data;

    // Parse color strings into R, G, B components
    const parseColor = (colorStr) => colorStr.split(',').map(s => parseInt(s.trim(), 10));
    
    const [bR, bG, bB] = parseColor(obsidianBaseColorStr);
    const [mR, mG, mB] = parseColor(obsidianMidToneColorStr);
    const [hR, hG, hB] = parseColor(obsidianHighlightColorStr);

    // It's good practice to ensure thresholds are logical, e.g., shadow < highlight.
    // However, the current logic handles any order by prioritizing lower luminosity checks first.
    // If shadowMapThreshold > highlightMapThreshold, the mid-tone band might effectively disappear
    // or behave unexpectedly based on the 'else if' chain.
    // For simplicity, we assume user provides sensible values or accepts the outcome.

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved by default.

        // Calculate luminosity using standard coefficients (often approximation of NTSC or BT.601)
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;

        let outR, outG, outB;

        // Determine the output color based on luminosity and thresholds
        if (lum < shadowMapThreshold) {
            // Pixel is in the shadow range
            outR = bR;
            outG = bG;
            outB = bB;
        } else if (lum < highlightMapThreshold) { 
            // Pixel is in the mid-tone range (i.e., shadowMapThreshold <= lum < highlightMapThreshold)
            outR = mR;
            outG = mG;
            outB = mB;
        } else { 
            // Pixel is in the highlight range (i.e., lum >= highlightMapThreshold)
            outR = hR;
            outG = hG;
            outB = hB;
        }

        // Set the new RGB values, clamping them to the 0-255 range
        data[i] = Math.max(0, Math.min(255, outR));
        data[i + 1] = Math.max(0, Math.min(255, outG));
        data[i + 2] = Math.max(0, Math.min(255, outB));
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}