JavaScript - Mqtt发送和恢复图像

Question

我目前正在开展一个项目，在这个项目中，我希望将一个像ByteArray的图像发送给一个带有java到主题图像的mosquitto代理。 这些主题的订阅者是一个JavaScript应用程序，它应该将用Java制作的ByteArray转换回Image。 图像的接收效果很好，但图像无法正确显示。

到目前为止我得到了什么：

发布图像的Java代码

public void doDemo(){
        try {
            client = new MqttClient("tcp://192.168.56.1", "Camera1", new MemoryPersistence());
            MqttConnectOptions connOpts = new MqttConnectOptions();
            connOpts.setCleanSession(true);
            client.connect(connOpts);
            MqttMessage message = new MqttMessage();
            File imgPath = new File(Reciver.class.getResource("Card_1007330_bg_low_quality_000.png").getPath());
            BufferedImage bufferedImage = ImageIO.read(imgPath);

            // get DataBufferBytes from Raster
            WritableRaster raster = bufferedImage .getRaster();
            DataBufferByte data   = (DataBufferByte) raster.getDataBuffer();

            message.setPayload(data.getData());
            client.publish("spengergasse/building-b/2.14/images", message);

        } catch (MqttPersistenceException e) {
            e.printStackTrace();
        } catch (MqttSecurityException e) {
            e.printStackTrace();
        } catch (MqttException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
                client.disconnect();
            } catch (MqttException e) {
                e.printStackTrace();
            }
        }
    }

用于显示图片的JavaScript

function onMessageArrived(r_message){
	console.log(r_message);
		
	document.getElementById("ItemPreview").src = "data:image/png;base64," + convert(r_message.payloadBytes);
}

function convert(buffer) {
	var binary = '';
	var bytes = new Uint8Array(buffer);
	var len = bytes.byteLength;
	for (var i = 0; i < len; i++) {
		binary += String.fromCharCode(bytes[i]);
	}
	return window.btoa(binary);
}

收回图像后我就开始了：

也许有人可以帮助我。 非常感谢：D

Answer 1

尝试一下：

bar