Question

我正在使用roslibjs在浏览器中显示来自ROS的信息。我订阅的主题之一是sensor_msgs/Image类型，我想在浏览器中显示图像。例如，我收到的消息是1个红色像素的图像：

{
"encoding":"bgr8",
"height":1,
"header":{
    "stamp":{
        "secs":1394210281,
        "nsecs":406450571
        },
    "frame_id":"image",
    "seq":1
    },
"step":3,
"data":"AAD+",
"width":1,
"is_bigendian":0
}

我想将此数据转换为base64编码图像，因此我可以将图像显示为：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/jPwAAAAwEBAGMkVdMAAAAASUVORK5CYII=">

有谁知道如何（使用javascript）我可以使用ROS消息最终创建base64编码的png？

Answer 1

查看Robot Web Tools组中的mjpeg_server包。

这可能是一个更简单的解决方案！

http://wiki.ros.org/mjpeg_server

Answer 2

请尝试将图片转换为base64，然后发布并解码为HTML页面内的图片，而不是流式sensor_msgs/Image。

Python3代码：

import cv2
import rospy
import base64

from std_msgs.msg import String

publisher = rospy.Publisher(
    '/viz_flow/rgb', String, queue_size=10
)

image = cv2.imread('some_image.jpg')
_, buffer = cv2.imencode('.jpg', image)
image_as_str = base64.b64encode(buffer).decode('utf-8')
publisher.publish(image_as_str)

JS代码：

...
  var stream_rgb_listener = new ROSLIB.Topic({
    ros : ros,
    name : '/viz_flow/rgb',
    messageType : 'std_msgs/String'
  });
  listener.subscribe(function(msg) {
    var canvas = document.getElementById('rgb-canvas');
    ctx = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
      ctx.drawImage(image, 0, 0);
    };
    image.src = `data:image/png;base64,${msg.data}`;
  });
...

如何使用roslibjs与sensor_msgs / Image类型的主题来显示图像

2 个答案: