How to get pixel x, y color coordinate of image?

Question

Is there a way to check if the selected (x, y) point of a PNG image is transparent?

Answer 1

Based on Jeff's answer, the first step is to create a canvas of your PNG. The following creates an off-screen canvas that has the same width and height as your image and has the image drawn on it.

var img = document.getElementById('my-image'); var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); 

After that, when the user clicks, use event.offsetX and event.offsetY to get the position. This can then be used to get the pixel:

 var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

Since you only capture one pixel, pixelData is a four-digit array containing the pixel values ​​of R, G, B, and A. For alpha, anything less than 255 represents some level of transparency, with 0 being completely transparent.

Here is a jsFiddle example: http://jsfiddle.net/thirtydot/9SEMf/869/ I used jQuery for convenience in all of this, but this is by no means required.

Note. getImageData refers to a policy of the same origin of the browser to prevent data leakage, which means that this method will not succeed if you dirty the canvas with the image from another domain or (I suppose, but some browsers may have resolved this) SVG from any domain. This protects against cases where the site serves a custom image object for a registered user, and the attacker wants to read the image for information. You can solve this problem either by displaying an image from the same server or by implementing resource sharing for different sources .

Answer 2

Canvas is a great way to do this, as @pst said above. Check this answer for a good example:

getPixel from HTML Canvas?

Some code that will be especially useful to you:

 var imgd = context.getImageData(x, y, width, height); var pix = imgd.data; for (var i = 0, n = pix.length; i < n; i += 4) { console.log pix[i+3] } 

This will go along the line, so you will need to convert this to x, y and either convert the for loop to a direct check, or execute the conditional code inside.

Repeating your question, it seems that you want you to be able to indicate that the person is clicking. This can be done quite easily with the jquery click event. Just run the above code inside the click handler as such:

 $('el').click(function(e){ console.log(e.clientX, e.clientY) } 

Those should capture your x and y values.

Answer 3

The two previous answers show how to use Canvas and ImageData. I would like to offer an answer with a runnable example and use an image processing structure, so you don't need to manually process the pixel data.

MarvinJ provides an image.getAlphaComponent (x, y) method that simply returns the transparency value for the pixel at the x, y coordinate. If this value is 0, the pixel is completely transparent, values ​​from 1 to 254 are transparency levels, and 255 are opaque.

For demonstration, I used the image below (300x300) with a transparent background and two pixels at the coordinates (0,0) and (150,150) .

Console exit:

(0,0): TRANSPARENT
(150 150): NOT_TRANSPARENT

 var canvas = document.getElementById("canvas"); image = new MarvinImage(); image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); function imageLoaded(){ console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); } 

 <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> <canvas id="canvas" width="500" height="344"></canvas>