How to get a pixel s x y coordinate color from an image

Question

Is there any way to check if a selected x y  point of a PNG image is transparent

User · Answer

The two previous answers demonstrate how to use Canvas and ImageData. I would like to propose an answer with runnable example and using an image processing framework, so you don't need to handle the pixel data manually.

MarvinJ provides the method image.getAlphaComponent(x,y) which simply returns the transparency value for the pixel in x,y coordinate. If this value is 0, pixel is totally transparent, values between 1 and 254 are transparency levels, finally 255 is opaque.

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

Console output:

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

_x000D_

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

_x000D_

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>

_x000D_

User · Answer

Building on Jeff s answer  your first step would be to create a canvas representation of your PNG   The following creates an off-screen canvas that is 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 a user clicks  use event offsetX and event offsetY to get the position   This can then be used to acquire the pixel   var pixelData   canvas getContext  2d   getImageData event offsetX  event offsetY  1  1  data    Because you are only grabbing one pixel  pixelData is a four entry array containing the pixel s R  G  B  and A values   For alpha  anything less than 255 represents some level of transparency with 0 being fully transparent   Here is a jsFiddle example  http   jsfiddle net thirtydot 9SEMf 869   I used jQuery for convenience in all of this  but it is by no means required   Note  getImageData falls under the browser s same-origin policy to prevent data leaks  meaning this technique will fail if you dirty the canvas with an image from another domain or  I believe  but some browsers may have solved this  SVG from any domain   This protects against cases where a site serves up a custom image asset for a logged in user and an attacker wants to read the image to get information   You can solve the problem by either serving the image from the same server or implementing Cross-origin resource sharing

User · Answer

Canvas would be a great way to do this  as  pst said above  Check out this answer for a good example   getPixel from HTML Canvas   Some code that would serve you specifically as well   var imgd   context getImageData x  y  width  height   var pix   imgd data   for  var i   0  n   pix length  i  lt  n  i    4      console log pix i 3      This will go row by row  so you d need to convert that into an x y and either convert the for loop to a direct check or run a conditional inside   Reading your question again  it looks like you want to be able to get the point that the person clicks on  This can be done pretty easily with jquery s click event  Just run the above code inside a click handler as such      el   click function e      console log e clientX  e clientY      Those should grab your x and y values

User · Answer

With   i  lt  lt  2  const data   context getImageData x  y  width  height  data  const pixels        for  let i   0  dx   0  dx  lt  data length  i    dx   i  lt  lt  2        if  data dx 3   lt   8          console log  transparent x      i

[javascript] How to get a pixel's x,y coordinate color from an image?

Examples related to javascript

Examples related to html

Examples related to image-processing