Extraire une couleur de pixel d'une image url/uri de données

Question

Donc, fondamentalement, j'ai ce projet où j'ai des captures d'écran téléchargées sur un site Web directement avec la conversion dataURL ou dataURI (je ne sais pas lequel est correct), et je Je travaille à faire en sorte que je puisse obtenir des informations relatives aux pixels de la capture d'écran. J'insère l'URL de données dans une propriété d'image d'arrière-plan et je ne pouvais pas utiliser canvas pour les autres fonctions de mon projet.

J'aimerais obtenir la couleur spécifique d'un pixel donné à une certaine position. J'ai la chaîne contenant dataURL. Existe-t-il un moyen d'extraire la couleur du pixel?

Pour ceux qui ne connaissent pas l'URL de données, voici une que mon javascript créé pour une capture d'écran de mon:

pastebin.com/NRad8nQr

J'ai trouvé beaucoup sur le résultat de cette sujet, cependant je ne peux pas trouver un seul qui n'utilise pas de toile ..

Answer 1

Malheureusement, la seule façon intégrée pour l'accès au pixel est d'utiliser une toile.

Le DataURL lui-même peut être décodé avec Base64, mais cela vous donne les données binaires compressées. Pour obtenir les données de pixels vous devez réimplémenter le décodage d'image réelle pour tous les formats pris en charge, si JPEG, PNG, GIF, etc.

Si vous, par exemple, limiter à vous JPEG pouvez utiliser https://github.com/gchudnov/jpeg-asm/blob/master/README.md puis:

// pseudo code 
var jpegData = atob(dataUrl) 
var pixels = decodeJPEG(jpegData) 
var color = pixels.slice((y * width + x) *4, 4) 

J'ai créé a working example for PNG on Glitch