Image Color Replacement Tool While Preserving Transparency

function processImage(originalImg, replacementColor = '#000000') {
    // Create a new canvas element to draw the modified image on.
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Get the 2D rendering context. Using 'willReadFrequently' is a performance hint for getImageData.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

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

    // A robust way to parse any valid CSS color string (like 'red', '#F00', 'rgb(255,0,0)')
    // is to draw it on a temporary 1x1 canvas and read the resulting pixel's RGBA values.
    const colorCanvas = document.createElement('canvas');
    colorCanvas.width = 1;
    colorCanvas.height = 1;
    const colorCtx = colorCanvas.getContext('2d');
    colorCtx.fillStyle = replacementColor;
    colorCtx.fillRect(0, 0, 1, 1);
    const colorData = colorCtx.getImageData(0, 0, 1, 1).data;
    const [newRed, newGreen, newBlue] = colorData;

    // Get the pixel data from the canvas containing the original image.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data; // This is a flat array of [R, G, B, A, R, G, B, A, ...]

    // Iterate over every pixel in the imageData array. Each pixel consists of 4 values (RGBA),
    // so we increment the loop counter by 4 each time.
    for (let i = 0; i < pixels.length; i += 4) {
        // The alpha value is the 4th component of each pixel (at index i + 3).
        const alpha = pixels[i + 3];

        // If the pixel is not fully transparent (i.e., its alpha value is greater than 0),
        // we replace its color.
        if (alpha > 0) {
            pixels[i] = newRed; // Set the Red channel
            pixels[i + 1] = newGreen; // Set the Green channel
            pixels[i + 2] = newBlue; // Set the Blue channel
            // We do not change pixels[i + 3], the alpha channel, to preserve the original transparency.
        }
    }

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

    // Return the canvas element. It can be directly appended to a DOM element.
    return canvas;
}