Image Pixel Shuffle Tool

function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the original image dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Get the image data from the canvas
    // If the image is 0x0, handle gracefully
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas; // Return an empty (0x0) canvas
    }
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Calculate the total number of pixels
    const numPixels = imgWidth * imgHeight;

    // Fisher-Yates shuffle algorithm to shuffle pixels
    // We iterate from the last pixel down to the second pixel
    for (let i = numPixels - 1; i > 0; i--) {
        // Pick a random index j from 0 to i (inclusive)
        const j = Math.floor(Math.random() * (i + 1));

        // Swap pixel i with pixel j
        // Each pixel is 4 an array of 4 values (R, G, B, A)
        // So, we need to swap 4 array elements for each pixel

        // Store pixel i's components
        const r_i = data[i * 4];
        const g_i = data[i * 4 + 1];
        const b_i = data[i * 4 + 2];
        const a_i = data[i * 4 + 3];

        // Copy pixel j's components to pixel i's position
        data[i * 4]     = data[j * 4];
        data[i * 4 + 1] = data[j * 4 + 1];
        data[i * 4 + 2] = data[j * 4 + 2];
        data[i * 4 + 3] = data[j * 4 + 3];

        // Copy stored pixel i's components to pixel j's position
        data[j * 4]     = r_i;
        data[j * 4 + 1] = g_i;
        data[j * 4 + 2] = b_i;
        data[j * 4 + 3] = a_i;
    }

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

    // Return the canvas with the shuffled image
    return canvas;
}