web-dev-qa-db-fra.com

Stocker des images dans un objet Javascript

Je ne sais pas si cela est possible, mais je souhaite stocker une image dans une variable JavaScript ou dans un objet. Lorsque la page se charge, je souhaite que ces images apparaissent à l'emplacement souhaité.

Je veux savoir si certaines images sont converties en forme binaire. Peuvent-ils être reconvertis en images avec JavaScript?

javascripthtmlimagexhtml
27
user288134

Il semble que l'OP demande comment créer des îlots de données en JavaScript, en particulier pour les images. Aucune des réponses données précédemment ne fournit une telle méthode, alors allez-y.

Fondamentalement, vous codez l'image en tant que chaîne base64, puis définissez-la comme source d'un élément DOM. Définir la source d'un objet Image sur une URL n'est pas équivalent, car il nécessite une connexion HTTP supplémentaire.

var data = 'data:image/gif;base64,'+
    'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+
            // snip //
    'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+
    'Tata18rWtrr1rTIIAQA7';
var icon_elem = document.getElementById("icon_here");
icon_elem.src = data;

Le code ci-dessus et un exemple complet peuvent être trouvés ici: http://www.kawa.net/works/js/data-scheme/base64-e.html

49
Justin Johnson

Vous pouvez simplement utiliser

var img = new Image();
img.src = "http://yourimage.jpg";

créer une image DOM.

Une image DOM est un objet en mémoire qui contient la forme binaire de l'image. Il n'est donc pas nécessaire de la reconvertir en image, car elle en est déjà une.

13
Luca Matteis

Vous voyez, ceci est simple. Mais la méthode pour aborder ce problème n’est pas celle que vous essayez actuellement.

Ce que vous pensez va marcher:
Nous allons stocker l’image (ses données binaires) dans une variable js, puis la placer sur la page à tout moment.

Comment cela fonctionnera beaucoup plus facilement:
il vous suffit de créer une image DOM sur la page et de définir sa source. Le navigateur récupérera automatiquement l'image du serveur.

Exemples:

ex-1:

var img_src = "http://someserver/yourimage.png";
var node = document.getElementById('the-node-in-which-i-want-my-image');
node.innerHTML = "<img src='"+img_src+"' alt='my image'>";

ex-2: (using jquery) - ceci est essentiellement le même que ci-dessus, mais beaucoup plus facile à écrire:

var img_src = "http://someserver/yourimage.png";
$('#the-node-in-which-i-want-my-image')
    .html("<img src='"+img_src+"' alt='my image'>");

Maintenant, il y a encore une chose: le navigateur commence à récupérer l'image après ce code est exécuté, de sorte que l'image apparaît un peu après que vous l'ayez insérée dans le DOM.

Pour éviter cela, vous pouvez pré-récupérer les images en utilisant:

var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";

À votre santé!

0
jrharshath