Image Solarize Filter Tool

function processImage(originalImg, threshold = 128) {
    // Check if the originalImg object is provided.
    if (!originalImg) {
        console.error("Original image is null or undefined.");
        // Create and return an empty 0x0 canvas as a fallback.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 0;
        errorCanvas.height = 0;
        return errorCanvas;
    }

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

    // Determine image dimensions from various potential properties of the image source.
    // HTMLImageElement uses naturalWidth/naturalHeight for intrinsic dimensions.
    // HTMLVideoElement uses videoWidth/videoHeight.
    // HTMLCanvasElement and others might use width/height directly.
    const imgWidth = originalImg.naturalWidth || originalImg.videoWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.videoHeight || originalImg.height;

    // Set canvas dimensions. If dimensions are invalid (e.g., NaN, undefined),
    // (Number(dimension) || 0) will ensure they become 0.
    canvas.width = Number(imgWidth) || 0;
    canvas.height = Number(imgHeight) || 0;

    // If canvas dimensions are zero (e.g., image not loaded or invalid source),
    // return the 0x0 canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    // Check if the 2D rendering context was successfully obtained.
    if (!ctx) {
        console.error("Could not get 2D rendering context. Your browser might not support Canvas.");
        // Return the canvas (it will be blank as drawing isn't possible).
        return canvas;
    }

    try {
        // Draw the original image onto the canvas.
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image onto canvas: ", e.message, originalImg);
        // If drawing fails (e.g., originalImg is not a valid image source),
        // return the canvas (it might be blank or partially drawn).
        return canvas;
    }

    let imageData;
    try {
        // Attempt to get the pixel data from the canvas.
        // This can fail due to security restrictions (e.g., CORS) if the image is cross-origin.
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData (e.g., CORS issue on a tainted canvas): ", e.message);
        // If pixel data cannot be accessed, the filter cannot be applied.
        // Return the canvas with the original image drawn on it (no filter applied).
        return canvas;
    }

    const data = imageData.data; // This is a Uint8ClampedArray

    // Sanitize the threshold parameter.
    let numericThreshold = Number(threshold);
    if (isNaN(numericThreshold)) {
        numericThreshold = 128; // Use default if provided threshold is not a valid number.
    }
    // Clamp the threshold to the valid range for a color component [0, 255].
    numericThreshold = Math.max(0, Math.min(255, numericThreshold));

    // Iterate over each pixel in the ImageData. Each pixel is represented by 4 consecutive
    // values in the array: Red, Green, Blue, and Alpha.
    for (let i = 0; i < data.length; i += 4) {
        // The solarize effect inverts pixel color components (R, G, B)
        // if their value is above the specified threshold.
        // Inversion means: newValue = 255 - oldValue.

        if (data[i] > numericThreshold) { // Red component
            data[i] = 255 - data[i];
        }
        if (data[i + 1] > numericThreshold) { // Green component
            data[i + 1] = 255 - data[i + 1];
        }
        if (data[i + 2] > numericThreshold) { // Blue component
            data[i + 2] = 255 - data[i + 2];
        }
        // The Alpha channel (data[i + 3]) is typically preserved.
    }

    // Write the modified pixel data back to the canvas.
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}