web-dev-qa-db-fra.com

JavaScript: obtenir ImageData sans toile

Est-il possible d'obtenir un objet ImageData à partir d'une image qui n'est pas sur la toile mais ailleurs dans l'arborescence DOM comme un <img> Normal?

Si oui, comment?

javascripthtml5canvas
48
clamp

Vous devez créer un canevas en mémoire puis dessiner sur ce canevas l'image:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myimg');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
var myData = context.getImageData(0, 0, img.width, img.height);

Mais cela ne fonctionnera pas si l'image provient d'un autre domaine. Il s'agit d'une restriction de sécurité que vous ne pouvez pas contourner si vous n'avez aucun contrôle sur le serveur (faites attention à ce que si vous ouvrez votre fichier html avec file: // vous aurez beaucoup de restrictions supplémentaires, utilisez http: //)

51
Denys Séguret

Comme déjà impliqué, canvas offre la seule solution pour créer des objets ImageData.

Si vous êtes vraiment contre l'utilisation de l'élément canvas pour charger les données d'image (peut-être que nous parlons de lte IE8), vous pouvez toujours envisager d'analyser les données d'image base64 en utilisant l'emplacement src d'un objet image

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

C'est difficile, mais si vous le devez, cela pourrait potentiellement analyser des images dans un tableau de cette façon.

https://github.com/devongovett/png.js/blob/master/png.js

Cela vous montre comment charger les données avec une demande xhr et analyser les données png. En interne, il utilise le canevas pour d'autres choses, mais le sous-ensemble qui vous intéresse est sans canevas. Vous devez suivre une implémentation similaire pour chaque format d'image qui vous intéresse.

Je dois mentionner que les limites de lecture des pixels de l'image sont identiques en termes de sécurité. Vous ne pourrez jamais lire les pixels provenant d'un tiers, avec ou sans toile. XMLHTTPRequest va être lié à la gouvernance des politiques inter-domaines. Cela empêche les scripts de voler du contenu tiers, qui comprend des images pouvant contenir des informations utilisateur sensibles.

Si vous devez lire des images sur un domaine tiers (qui ne nécessitent pas d'authentification pour être affichées), vous devez exécuter un serveur proxy d'images sur votre domaine qui vous permet de demander des images sur le même domaine. Si vous devez vous attaquer à cela, il pourrait être plus facile de fournir simplement les données d'image sous forme de tableau json en premier lieu.

18
Matt Esch