Intégrer des images externes pour une utilisation dans un canevas HTML?

J'utilise JavaScript pour charger une image dans mon élément Canvas dans Firefox. Cela fonctionne très bien pour les images locales, mais génère une exception de sécurité pour les images externes. Est-il possible d'éviter cette exception de sécurité, qui n'implique pas que mon serveur doive agir en tant que proxy pour charger l'image localement (parce que cela mettrait l'accent sur mon serveur)?Intégrer des images externes pour une utilisation dans un canevas HTML?

PS: Le code actuel est similaire à ceci:

var img = new Image(); 
var contextSource = canvasSource.getContext('2d'); 
contextSource.drawImage(img, 0, 0); 
// get image data to do stuff with pixels 
var imageDataSource = contextSource.getImageData(0, 0, width - 1, height - 1);

Source

2010-04-14 Philipp Lenssen

Je ne pense pas que ce soit possible, car cela pourrait ouvrir le navigateur pour traverser les attaques de domaine.

Source

2010-04-14 09:26:19

J'ai montré dans mon blog que c'est possible –

Oh oups. Je pensais que vous avez répondu après je l'ai fait. Devrait regarder mieux à l'année –

En fait, il pourrait être aussi bien possible en utilisant XHR niveau 2 et UrlData. Découvrez my blog post.

Source

2011-03-13 06:21:49

En effet, vous montrez qu'il est vraiment possible d'obtenir des images d'autres domaines. –

Aussi belle soit-elle, la méthode de Stanislav dépend du partage des ressources d'origines croisées. Si vous pouvez gréer le CORS access-control-allow-origin pour autoriser votre domaine, vous possédez le domaine et il peut aussi bien ne pas être un serveur "externe". –

Peut être le même serveur avec un domaine/sous-domaine différent. Honnêtement, je cherchais un moyen d'apporter des images d'un CDN pour les jeux/applications html5. –

Ceci est possible pour les images de taille inférieure à 25,6k. Utilisez le convertisseur de données de YQL: uri pour saisir l'image et remettre le bloc encodé en base 64. Créez ensuite une image dans le client et définissez sa source sur les données que vous avez reçues de YQL. Exemple ici:

http://kentbrewster.com/avatar-portraits

Voici un lien vers la droite YQL data table.

[édité pour corriger; c'est 25.6k, pas 256]

Source

2011-09-06 03:51:58

Etes-vous sûr que ce n'est pas moins de 25K, pas 256K? – jmoreno

Oups, désolé! Fixé! –

J'espérais en fait avoir tort ... – jmoreno

Intégrer des images externes pour une utilisation dans un canevas HTML?

Répondre

Questions connexes