Utiliser une variable comme source pour afficher une image
Résolu
TR_2000
Messages postés
21
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'envoie l'URL d'une image encodée en base64 via websocket à mon client js, j'aimerais ensuite utiliser cette string en tant que source dans la balise img de mon code html.
Pour le moment j'affiche mon image mais qu'en copiant collant la chaine de caractère de cette manière.
Mon code javascripte est le suivant :
La chaine de caractères est reçue dans la variable "base64Url" et c'est celle ci que j'aimerais utiliser pour afficher l'image.
Je ne sais pas comment procéder... Il faut aussi savoir que c'ette image sera raffraichit chaque seconde via la variable qui sera modifiée dans le js. Je ne sais pas si c'est possible avec cette méthode où si cela nécessite de faire plus compliqué.
Merci pour votre aide,
J'envoie l'URL d'une image encodée en base64 via websocket à mon client js, j'aimerais ensuite utiliser cette string en tant que source dans la balise img de mon code html.
<section> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAADICAAAAABTgsyVAAACk0lEQVR4nO3VQQ3DQAwAwV6//RZAKYRTqJRCQAROCF1BpFEeO0PAliytx/YAqp53LwDcRwAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAAOOu1znksPspfvL9z7p9x/SD3gjABgDABgDABgDABgDABgDABgDABgDABgLAfM/MI+MqME/MAAAAASUVORK5CYII=" alt="Red dot" /> <br> FFT[197]: <span id="data"></span> </section>
Pour le moment j'affiche mon image mais qu'en copiant collant la chaine de caractère de cette manière.
Mon code javascripte est le suivant :
if ("WebSocket" in window) { // Let us open a web socket var ws = new WebSocket("ws://localhost:8000"); ws.onopen = function(){ // Web Socket is connected, send data using send() ws.send("Client web connecté"); }; ws.onmessage = function (evt) { var base64Url = evt.data; document.getElementById("data").innerHTML=base64Url; }; ws.onclose = function(){ // websocket is closed. alert("Connection is closed..."); }; } else { // The browser doesn't support WebSocket alert("WebSocket NOT supported by your Browser!"); }
La chaine de caractères est reçue dans la variable "base64Url" et c'est celle ci que j'aimerais utiliser pour afficher l'image.
Je ne sais pas comment procéder... Il faut aussi savoir que c'ette image sera raffraichit chaque seconde via la variable qui sera modifiée dans le js. Je ne sais pas si c'est possible avec cette méthode où si cela nécessite de faire plus compliqué.
Merci pour votre aide,
A voir également:
- Utiliser une variable comme source pour afficher une image
- Utiliser une tablette comme ecran pc - Guide
- Utiliser iphone comme webcam - Guide
- Utiliser chromecast - Guide
- Légender une image - Guide
- Créer une image iso - Guide
1 réponse
Bonjour,
Pour faire un refresh toutes les X secondes :
https://www.w3schools.com/jsref/met_win_setinterval.asp
Pour modifier l'image, il faut modifier sa propriété SRC
https://www.google.com/search?q=javascript+img+src
Pour faire un refresh toutes les X secondes :
https://www.w3schools.com/jsref/met_win_setinterval.asp
Pour modifier l'image, il faut modifier sa propriété SRC
https://www.google.com/search?q=javascript+img+src