时间戳

首页 > 解决方案 > javascript Mqtt接收图像并更改src属性

javascript - javascript Mqtt接收图像并更改src属性

问题描述

我有这个简单的 HTML 代码：

 <!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>

我正在尝试通过 mqtt 服务器接收图像来更改 img 标签的 src，所以我这样做：

    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));
  }

但它不起作用，并且控制台中没有错误！mqtt 连接正常，因为我可以接收文本并在控制台中打印！

谢谢你 ！

标签： javascripthtmlelectronmqtt

解决方案

推荐阅读