React JS getImageData returns 0's for all rgba values

Question

I have an issue that seems to persist despite encountering many other relevant posts with helpful solutions.

I want to create a nested array for each png based on the alpha channel value of each pixel.

Here is a smaller 5 x 5 example of the results I would like:

[[1, 0, 1, 0, 1],
[0, 1, 0, 1, 0],
[1, 0, 1, 0, 1],
[0, 1, 0, 1, 0],
[1, 0, 1, 0, 1]]

Whether a value inside the nested arrays has a 1 or 0 depends on if the alpha value for that pixel is equal to 255. If a pixel is black, I want that specific value in the nested array to be a 1. All of these pngs are very small, 16 x 16 pixels.

The way I went about creating these arrays is by putting a canvas in a ref, and then using .drawImage() and .getImageData() to get the information.

.getImageData() has these parameters (0, 0, 16, 16, {colorSpace: 'srgb'}), hopefully 16 x 16 are the right dimensions to capture the correct imageData.

In the CSS file, I set the canvas to have these dimensions:

width: 260px; height: 150px; Hopefully this doesn't impede .getImageData() in any way.

I also made sure to use .onload to wait for the image to get done loading. Also upon loading is when the dimensions of the canvas will be set.

The images I've made have a transparent background, because when I test them out by displaying them on the canvas, there is no different background color inside the transparent areas of the image. I've also made sure to keep the alpha channel when saving these images.

In .getContext(), I made sure to set alpha to true

Below is the code that handles each png:

    function handleSubmit(event) {
        event.preventDefault();
        let convertedPresets = [];

        if (presetLayouts.length > 0) {

            for (let presetIndex = 0; presetIndex < presetLayouts.length; presetIndex++) {
                let newConvertedPreset = [];

                let img = new Image();
                img.crossOrigin = 'Anonymous';
                
                let ctx = canvasRef.current.getContext('2d', { alpha: true, desynchronized: false, colorSpace: 'srgb', willReadFrequently: true})
                ctx.globalCompositeOperation = "copy";

                let imageData;

                img.onload = function () {
                    ctx.width = img.width;
                    ctx.height = img.height;
                    
                    ctx.drawImage(img, 0, 0);
                    console.log(ctx)
                    imageData = ctx.getImageData(0, 0, 16, 16, {colorSpace: 'srgb'}).data;

                    for (let rowIndex = 0; rowIndex < 16; rowIndex++) {

                        let newRow = [];
                        
                        for (let i = 0; i < 64; i += 4) {
                            // every 4th imageData element is 
                            // the alpha channel for each pixel

                            if (imageData[i + 3] === 255) {
                                newRow.push(1);
                                

                            } else if (imageData[i + 3] === 0) {
                                newRow.push(0);
                            }

                        }

                        newConvertedPreset.push(newRow)

                    }

                }

                img.src = presetLayouts[presetIndex];

            }

            convertedPresets.push(newConvertedPreset)

        }

        ...

    }

Below are the two solutions from other posts that I've tried, but did not work because they gave me the same result:

Creating a Promise

context.globalCompositeOperation = "copy"

If you have any suggestions as to what might be missing, please let me know.

Thank you!

Answer 1

It turns out I iterated over the data in a way that kept getting no results.

Before, it only iterated over the first row, which won't return anything but zeros in this case (because I never drew over that area). I never incremented the index past the first row's starting point. Below you can see the correction:

function handleSubmit(event) {
        event.preventDefault();

        let convertedPresets = [];

        if (presetLayouts.length > 0) {

            for (let presetIndex = 0; presetIndex < presetLayouts.length; presetIndex++) {
                let newConvertedPreset = [];
                let presetSrc = presetLayouts[presetIndex].replace('/public', '')
                console.log(presetSrc)

                let img = new Image();
                img.crossOrigin='Anonymous';
                
                let ctx = canvasRef.current.getContext('2d', { alpha: true, desynchronized: false, colorSpace: 'srgb', willReadFrequently: true})
                ctx.globalCompositeOperation = "copy";

                let imageData;

                img.onload = function () {
                    console.log(img.width, img.height)
                    ctx.width = img.width;
                    ctx.height = img.height;
                    ctx.imageSmoothingEnabled = false;
                    
                    ctx.drawImage(img, 0, 0);
                    console.log(ctx)
                    imageData = ctx.getImageData(0, 0, 16, 16, {colorSpace: 'srgb'}).data;
                    console.log(imageData)
                    for (let rowIndex = 0; rowIndex < 16; rowIndex++) {

                        let newRow = [];
                        
                        // CORRECTED
                        for (let i = 0 + 64 * rowIndex; i < 64 + 64 * rowIndex; i += 4) {
                        // CORRECTED
                            // every 4th imageData element is 
                            // the alpha channel for each pixel
                            console.log('r', imageData[i])
                            console.log('g', imageData[i + 1])
                            console.log('b', imageData[i + 2])
                            console.log('a', imageData[i + 3])
                            if (imageData[i + 3] === 255) {
                                newRow.push(1);
                                

                            } else if (imageData[i + 3] === 0) {
                                newRow.push(0);
                            }

                        }

                        newConvertedPreset.push(newRow)

                    }

                    convertedPresets.push(newConvertedPreset)
                }

                img.src = presetLayouts[presetIndex];

            }

            

        }

It was a stupid mistake, but I'm happy to have had this learning experience. Thank you all for your suggestions!