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

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

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

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   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   gt  0    NOT TRANSPARENT     TRANSPARENT     x000D    console log   150 150      image getAlphaComponent 150 150   gt  0    NOT TRANSPARENT     TRANSPARENT     x000D    x000D   lt script src  https   www marvinj org releases marvinj-0 7 js  gt  lt  script gt  x000D   x000D   x000D

[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