Image Background And White Area Remover

/**
 * Removes the background and all white areas from an image, making them transparent.
 * The background color is determined by the color of the pixel at the top-left corner (0,0).
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} tolerance A numeric value (0-442, though typically 0-100 is practical) representing the color distance tolerance. A higher value will remove more colors that are "similar" to the background and white. A tolerance of 0 removes only exact matches. The default is 20, which is effective for handling JPEG artifacts and anti-aliased edges.
 * @returns {HTMLCanvasElement} A new canvas element with the background and white areas removed.
 */
function processImage(originalImg, tolerance = 20) {
    // Create a new canvas to draw the image and manipulate its pixels
    const canvas = document.createElement('canvas');
    // For performance, hint that we'll be reading from the canvas frequently
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Get the original dimensions of the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas size to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get the pixel data from the entire canvas. This is an array of RGBA values.
    // It may throw a security error if the image is from a different origin.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Error processing image: ", e);
        // Can't process, so return a canvas with an error message
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = 'rgba(0,0,0,0.7)';
        ctx.fillRect(0, 0, width, height);
        ctx.font = "16px Arial";
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.fillText("Could not process image.", width / 2, height / 2 - 10);
        ctx.fillText("Ensure it's from the same domain or has CORS enabled.", width / 2, height / 2 + 10);
        return canvas;
    }


    const data = imageData.data;
    const toleranceSq = tolerance * tolerance;

    // Determine the background color from the top-left pixel (0,0)
    const bgR = data[0];
    const bgG = data[1];
    const bgB = data[2];

    // Iterate over each pixel in the image data (four values at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Calculate the squared color distance from the determined background color
        const bgDistSq = (r - bgR) ** 2 + (g - bgG) ** 2 + (b - bgB) ** 2;

        // Calculate the squared color distance from pure white
        const whiteDistSq = (r - 255) ** 2 + (g - 255) ** 2 + (b - 255) ** 2;

        // If the pixel is close to the background color OR close to white, make it transparent
        if (bgDistSq <= toleranceSq || whiteDistSq <= toleranceSq) {
            // Set the alpha channel to 0 to make the pixel fully transparent
            data[i + 3] = 0;
        }
    }

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

    // Return the canvas element, which can now be displayed
    return canvas;
}