So basically I've got this project where I have screenshots uploaded to a website directly with dataURL or dataURI conversion (I don't know which one is correct), and I'm working on making it so that I can get pixel relative information from the screenshot.
I'm inserting the data URL in a background image property, and I could not use canvas for the others functions my project has.
I'd like to get the specific color of a given pixel at a certain position. I have the string containing dataURL. Is there a way to extract the pixel color from it?
For the ones not familiar with data URL, here is one that my javascript created for one of my screenshot:
pastebin.com/NRad8nQr
I've found a lot on result of this subject, however I can't find a single one that doesnt uses canvas..
Unfortunately, the only built-in way for pixel access is to use a canvas.
The DataURL itself can be decoded with Base64, but that gives you the compressed binary data. To get to the pixel data you need to reimplement the actual image decoding for all supported formats, so JPEG, PNG, GIF etc.
If you, for instance, limit it to JPEG you could use https://github.com/gchudnov/jpeg-asm/blob/master/README.md and then:
// pseudo code
var jpegData = atob(dataUrl)
var pixels = decodeJPEG(jpegData)
var color = pixels.slice((y * width + x) *4, 4)
I have created a working example for PNG on Glitch