0

i have this simple HTML code:

 <!DOCTYPE html>
<html>
    <head>
        <script src="prog_page3.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    </head>
    <body>
        <h1 id="status">status : --</h1>
        <button onclick="connect()"> connect and import</button>
        <img src="image/txt_hemera.PNG" class="img_importer">
       
    </body>
</html>

and i'm trying to change the src of the img tag by receiving image by mqtt server so i do :

    function onMessageArrived(r_message) {
    console.log("message here")
    document.getElementsByClassName('img_importer').src = "data:image/png;base64," + convert(r_message.payloadBytes);
}

function convert(buffer) {
    var decoder = new TextDecoder('utf8');
    return window.btoa(decoder.decode(buffer));
  }

but it's not working ,and no error in the console ! the mqtt connection is working because i can receive a text and print it in the console !

thank you !

Hicham
  • 5
  • 1
  • 4
  • How is the message body formatted; is it a raw PNG? I suspect the use of `TextDecoder` is the problem; you may find [this answer](https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string) useful. – Brits Aug 23 '21 at 00:22
  • the image is jpeg format – Hicham Aug 23 '21 at 10:59
  • In that case you also need to change `image/png` to `image/jpeg`... – Brits Aug 23 '21 at 20:17

0 Answers0