Stocker des images dans un objet Javascript
Je ne suis pas sûr si cela est possible, mais je veux stocker une image dans une variable JavaScript ou un objet et lorsque la page se charge, je veux que ces images apparaissent là où vous le souhaitez.
Je veux savoir si certaines images sont converties sous forme binaire. Peuvent-ils être convertis en images avec JavaScript?
3 réponses
Il semble que L'OP demande comment faire des îlots de données en JavaScript, spécifiquement pour les images. Aucune des réponses précédemment données ne fournit une telle méthode, alors voilà.
Fondamentalement, vous encodez 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
, Vous pouvez simplement utiliser
var img = new Image();
img.src = "http://yourimage.jpg";
Pour 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 convertir en image car elle en est déjà une.
Vous voyez, c'est une question simple. Mais la méthode pour aborder ce problème n'est pas la façon dont vous essayez dès maintenant.
Ce que vous pensez fonctionnera:
Nous allons stocker l'image (ses données binaires) dans une variable js, puis la gifler 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 va récupérer l'image du serveur automatiquement.
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: (en utilisant jquery) - c'est essentiellement le même que ci-dessus, seulement 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 s'exécute, donc l'image apparaît un peu après l'avoir 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";
Cheers!