Get pixel color from an image [duplicate]

by
  • Create a canvas document.createElement
  • Get the 2d context canvas.getContext('2d')
  • Draw the image to the canvas context.drawImage(image, x, y)
    • Make sure the image is from the same domain or you won’t have access to its pixels
  • Get the pixel data for the image context.getImageData(x1, y1, x2, y2)
    • You want just the top left so context.getImageData(0, 0, 1, 1)
  • The result of getImageData will have an array of pixels in it’s data field (context.getImageData(0,0,1,1).data)
    • The array will have r, g, b and a values.

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. Get image data URL in JavaScript?
  3. Check if an image is loaded (no errors) with jQuery
  4. Changing the image source using jQuery
  5. Programmatically change the src of an img tag
  6. How to create a JavaScript callback for knowing when an image is loaded?
  7. Determining image file size + dimensions via Javascript?
  8. Determine original size of image cross browser?
  9. Image resizing client-side with JavaScript before upload to the server
  10. How do you cache an image in Javascript
  11. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  12. Detect when an image fails to load in JavaScript
  13. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  14. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  15. Javascript set img src
  16. Get width height of remote image from url
  17. Load image with jQuery and append it to the DOM
  18. Get image dimensions with Javascript before image has fully loaded
  19. How to save a png from javascript variable
  20. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  21. Make image fill div completely without stretching
  22. Get the Size of a CSS Background Image Using JavaScript?
  23. img onload doesn’t work well in IE7
  24. How to download a base64-encoded image?
  25. How to render Streamable image on React coming from FastAPI server?
  26. JavaScript: Get image dimensions
  27. Add image in pdf using jspdf
  28. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  29. How do I get natural dimensions of an image using JavaScript or jQuery?
  30. How should I crop an image at client side using jcrop and upload it?

Leave a Comment