JavaScript: l'obtention de données images sans toile

Est-il possible d'obtenir un ImageData Objet à partir d'une image qui n'est pas sur la toile, mais quelque part ailleurs dans l'arborescence DOM normale <img> ?

Si oui, comment?

InformationsquelleAutor clamp | 2012-05-25
  1. 50

    Vous devez créer un dans la mémoire de la toile et ensuite dessiner sur cette toile de 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. C'est une restriction de sécurité vous ne pouvez pas vous en sortir si vous n'avez aucun contrôle du serveur (attention, que si vous ouvrez votre fichier html avec file://, vous aurez beaucoup de restrictions supplémentaires, utilisez http://)

    • Un autre point d'attention: les valeurs des pixels de rendu avec drawImage peuvent être différents de valeurs dans votre image à cause de la couleur de l'espace de correction. Bonne chose que cela se produit uniquement si l'image contient des informations d'espace couleur.
    • Oui, j'ai rencontré ce problème, il est intéressant de noter qu'il peut être très douloureux pour déboguer.
    • Le titre dit explicitement "sans toile", indépendamment de la toile est existe onn arborescence du DOM ou pas. C'est pourquoi j'ai donné de -1 à cette réponse.
    • Ma réponse est utile et permet de résoudre le vrai problème. Vous devriez essayer d'être utile aussi.
    • donc, vous ne pouvez pas télécharger une image dans une balise IMG pour un serveur? c'est un cas d'utilisation que la toile est inutile, parce que (1) l'image est probablement à partir d'un domaine aléatoire et (2) le rendu de l'image nécessite une perte de ré-encodage à un certain point
    • Vous devriez probablement utiliser img.naturalWidth et img.naturalHeight pour obtenir les dimensions de la source de données au lieu de les dimensions de l'rendu élément du DOM.
    • D'autre part, la question a la balise "canvas", et il mentionne "une image qui n'est pas sur la toile," impliquant qu'il est un canvas quelque part.
    • Cette "restriction de sécurité" dont vous parlez, c'est peut-être circumventable par la mise en crossOrigin = "Anonymes"? (Je suis en train de faire que quelque part, et il semble fonctionner.)
    • bien sûr, c'est pourquoi j'ai précisé "si vous n'avez aucun contrôle du serveur". C les en-têtes doivent être définies sur le serveur de ressources.
    • Ah. Qu'est ce qui me confond, c'est que je suis en train de faire que sur un serveur, je n'ai aucun contrôle dessus (ipi.io), mais ils ont cet ensemble. Quelques images des sites de partage de faire, aussi, il me semble. Ty.
    • sa aide beaucoup ! Merci man !

    InformationsquelleAutor Denys Séguret
  2. 17

    Comme déjà implicite, la toile offre la seule solution pour la création de données images des objets.

    Si vous êtes vraiment contre le jeu à l'aide de l'élément canvas pour charger les données de l'image (peut-être que nous parlons lte IE8), vous pouvez toujours envisager de prendre de l'analyse du base64 les données de l'image à l'aide de la src emplacement d'un objet image

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

    C'est difficile, mais si vous devez, pourrait éventuellement analyser les 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 requête xhr et d'analyser les png de données. En interne, il utilise la toile pour d'autres choses, mais le sous-ensemble que vous êtes intéressé est en toile gratuit. Vous devez suivre un plan de mise en œuvre similaire pour chaque format d'image qui vous intéresse.

    Je devrais mentionner que le pixel de l'image de lecture limites sont identiques en termes de sécurité. Vous ne serez jamais en mesure de lire les pixels provenant d'une tierce partie, avec ou sans toile. Le XMLHTTPRequest va être lié à la gouvernance de la croix-domaine des politiques. Cela empêche les scripts de voler le contenu de tiers, qui comprend des images qui peuvent contenir des informations sensibles.

    Si vous avez besoin de lire des images sur un tiers de domaine (qui ne nécessitent pas d'authentification de vue), vous devez exécuter une image de serveur proxy sur votre nom de domaine qui vous permet de demander des images sur le même domaine. Si vous avez besoin d'aller à la peine de cela, il peut être plus simple de fournir les données de l'image comme un tableau json en premier lieu.

    • l'authentification et la détection de browser sont deux grandes raisons que serveur de chargement de l'URL ne sont pas réalisables
    • Arg. Malheureusement, le premier lien est mort - le poste des charges, mais le code de démonstration ne l'a jamais fait par le biais d'un site de transition, et l'archive web jamais eu.
    • Regarder le dépôt github github.com/calyptus/labs/blob/master/JSBin/Demo/Viewer.html
    InformationsquelleAutor Matt Esch