Can I access the row and column of an image pixel with getImagePixelData?

From the Asset Store
A pack of RPG Potion icons. 12 unique Hand-drawn icons in high resolution.
  • Hello, I'm using getImagePixelData to modify the pixels of a Drawing Canvas. I would like to modify some pixels in some rows and columns but not all. Is there a way to do that somehow?

  • You should be able to alter a few parts of the returned ImageData and then load it back in to the canvas with loadImagePixelData().

  • You should be able to alter a few parts of the returned ImageData and then load it back in to the canvas with loadImagePixelData().

    Oh yeah I'm already doing that, but I want to keep a puzzle piece in each Canvas (I have 16 pieces). So I need to know exactly when a row of the image ends in the buffer if that's possible, thanx! :D

  • Each pixel uses 4 bytes in the imageData array (r, g, b, a). So here is how to get pixel data at row:x, column:y

    function getColorAtPixel(imageData, x, y) {
     const {width, data} = imageData
    
     return {
     r: data[4 * (width * y + x) + 0],
     g: data[4 * (width * y + x) + 1],
     b: data[4 * (width * y + x) + 2],
     a: data[4 * (width * y + x) + 3]
     }
    }
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Each pixel uses 4 bytes in the imageData array (r, g, b, a). So here is how to get pixel data at row:x, column:y

    > function getColorAtPixel(imageData, x, y) {
    const {width, data} = imageData
    
    return {
    r: data[4 * (width * y + x) + 0],
    g: data[4 * (width * y + x) + 1],
    b: data[4 * (width * y + x) + 2],
    a: data[4 * (width * y + x) + 3]
    }
    }

    Thank you so much! :D

    Here's is my code but it won't get a rectangular area that I want for some reason:

    	function getMainPartCoordinates (i, runtime, maskData, referenceData, pieceData) {
    
    	var mData = maskData.data;
    	var pData = pieceData.data;
    	var rData = referenceData.data;
    	
    	var rowsAndColumns = Math.sqrt (runtime.globalVars.NumberOfPieces);
    	
    	for (var j = i % rowsAndColumns * 117; j < i % rowsAndColumns * 117 + 117; j++){
    		for (var k= i % rowsAndColumns * 117; k < i % rowsAndColumns * 117 + 117; k++) {
    			if (getColorAtPixel (mData, k, j).a == 0)
    				setColorAtPixel (pData, rData, k, j);
    			else
    				break;
    		}
    	}
    	
    	
    	piecesDC[i].loadImagePixelData(pieceData);
    }
    

    Is there something wrong with this cause I get whole rows and I just want a rectangular area. :D

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)