ros中相機話題在web頁面上的顯示，嘗試js解析sensor

ros中相機話題在web頁面上的顯示，嘗試js解析sensor_msgs/Image數據

ros中相機話題在web頁面上的顯示

思路：
rosbridge websocket 開啟ros與web的通路，
話題數據轉換為image或者繪制在 canvas中。

話題格式：
sensor_msgs/Image
測試數據編碼類型為bgr8

嘗試：

解析為bitmap arraybuffer 寫入bgr8，顏色錯誤
轉換顏色通道arraybuffer 填到 canvas
直接繪制為canvas
直接顯示image

占用資源很高，顯示不太流暢，待優化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><script src="js/three.min.js"></script>
<script src="js/eventemitter2.js"></script>
<script src="js/roslib.js"></script>
<script src="js/ros3d.js"></script><!--
<script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4/lib/eventemitter2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>
<script src="../build/ros3d.js"></script>
-->
<script>/*** Setup all visualization elements when the page is loaded.*/function init() {// Connect to ROS.var ros = new ROSLIB.Ros({//url : 'ws://192.168.20.104:9090'url : 'ws://192.168.10.168:9090'});ros.on('connection', function() {console.log('Connected to websocket server.');});ros.on('error', function(error) {console.log('Error connecting to websocket server: ', error);});ros.on('close', function() {console.log('Connection to websocket server closed.');});var canvas = document.getElementById('img_canvas');canvas.width = 800;canvas.height = 600;var image = new Image();document.body.appendChild(image);image.onload = function() {var canvasWidth=canvas.width ;var canvasHeight=canvas.height;var imageWidth = image.width;var imageHeight = image.height;var imageAspectRatio = imageWidth / imageHeight;var canvasAspectRatio = canvasWidth / canvasHeight;var scaledWidth=1.0;var scaledHeight=1.0;if (imageAspectRatio > canvasAspectRatio) {scaledWidth = canvasWidth;scaledHeight = Math.round(scaledWidth / imageAspectRatio);} else {scaledHeight = canvasHeight;scaledWidth = Math.round(scaledHeight * imageAspectRatio);}var x = (canvasWidth - scaledWidth) / 2;var y = (canvasHeight - scaledHeight) / 2;ctx = canvas.getContext('2d');// 設置背景色并填充整個畫布ctx.fillStyle = "#f0f0f0"; // 淺灰色ctx.fillRect(0, 0, canvasWidth, canvasHeight);ctx.drawImage(image, x, y, scaledWidth, scaledHeight);};var example2 = ros.Topic({name: '/usb_cam/image_raw',messageType: 'sensor_msgs/Image'});var ccc=0function generateBMP(width,height,channel) {//var channel=3;//const width = 100;//const height = 100;const fileSize = 54 + width * height * channel; // Header size + pixel data sizevar  buffer = new ArrayBuffer(fileSize);const data = new DataView(buffer);// BMP Headerdata.setUint8(0, 0x42); // 'B'data.setUint8(1, 0x4d); // 'M'data.setUint32(2, fileSize, true); // file sizedata.setUint32(6, 0, true); // reserveddata.setUint32(10, 54, true); // pixel data offset// DIB Headerdata.setUint32(14, 40, true); // DIB header sizedata.setUint32(18, width, true); // widthdata.setUint32(22, height, true); // heightdata.setUint16(26, 1, true); // planesdata.setUint16(28, channel*8, true); // bits per pixel (32-bit)data.setUint32(30, 0, true); // compression (none)//data.setUint32(34, width * height * 4, true); // image sizedata.setUint32(34, width * height * channel, true); // image size --------------zzzdata.setUint32(38, 2835, true); // horizontal resolution (72 DPI)data.setUint32(42, 2835, true); // vertical resolution (72 DPI)data.setUint32(46, 0, true); // colors in palette (none)data.setUint32(50, 0, true); // important colors (all)// Pixel data (simple gradient with transparency)let offset = 54;for (let y = 0; y < height; y++) {for (let x = 0; x < width; x++) {const red = (x / width) * 255;const green = (y / height) * 255;const blue = ((x + y) / (width + height)) * 255;const alpha = (x / width) * 255; // Varying alpha//for transparencydata.setUint8(offset++, blue); // bluedata.setUint8(offset++, green); // greendata.setUint8(offset++, red); // red//data.setUint8(offset++, alpha); // alpha}}const blob = new Blob([buf], { type: "image/bmp" });image.src = URL.createObjectURL(blob);return buffer}var buf=null;example2.subscribe(function(message) {ccc++;if (ccc==1){buf=generateBMP(message.width, message.height,3)}//console.log('Received image seq=%d', message['header']['seq']);//AI???//const image = new ROSLIB.Image(); // 創建 Image 對象實例//image.data = new Uint8Array(message.data); // 設置圖像數據//image.width = message.width; // 設置圖像寬度//image.height = message.height; // 設置圖像高度//image.encoding = message.encoding; // 設置圖像編碼格式，例如 'rgb8' 或 'mono8' 等//if (ccc%5!=1){return;}let raw = window.atob(message.data);let rawLength = raw.length;//buf.set(raw, 54);a=rawLength/3b=new Uint8Array(buf)
/*b.set(raw.split('').map(char => char.charCodeAt(0)), 54);const blob = new Blob([b.buffer], { type: "image/bmp" });image.src = URL.createObjectURL(blob);//*//*// 將base64字符串中的每個字符轉換成ASCII碼（字符編碼值）for (let i = 0; i < a; i++) {b[54+i*3] = raw.charCodeAt(i*3+2);b[54+i*3+2] = raw.charCodeAt(i*3);b[54+i*3+1] = raw.charCodeAt(i*3+1);}const blob = new Blob([b.buffer], { type: "image/bmp" });image.src = URL.createObjectURL(blob);//*///*var ctx = canvas.getContext('2d');var imageData = ctx.createImageData(message.width, message.height); // 創建ImageData對象//console.log('Received image', message.width, message.height,message.step, message.encoding);// 創建一個Uint8Array類型的數組let uInt8Array = new Uint8Array(rawLength/3*4);// 將base64字符串中的每個字符轉換成ASCII碼（字符編碼值）for (let i = 0; i < a; i++) {uInt8Array[i*4] = raw.charCodeAt(i*3);uInt8Array[i*4+1] = raw.charCodeAt(i*3+1);uInt8Array[i*4+2] = raw.charCodeAt(i*3+2);uInt8Array[i*4+3] = 255;}imageData.data.set(uInt8Array); // 將圖像數據轉換為Uint8ClampedArray并設置到ImageData對象中ctx.putImageData(imageData, 0, 0); // 將ImageData繪制到Canvas上
//*//*//console.log('Received image', message.width, message.height,message.step, message.encoding);var ctx = canvas.getContext('2d');var imageData = ctx.createImageData(message.width, message.height); // 創建ImageData對象// 將base64字符串中的每個字符轉換成ASCII碼（字符編碼值）for (let i = 0; i < a; i++) {imageData.data[i*4] = raw.charCodeAt(i*3);imageData.data[i*4+1] = raw.charCodeAt(i*3+1);imageData.data[i*4+2] = raw.charCodeAt(i*3+2);imageData.data[i*4+3] = 255;   }ctx.putImageData(imageData, 0, 0); // 將ImageData繪制到Canvas上
//*/});}
</script>
</head><body onload="init()"><h1>sensor_msgs/Image Example</h1>
<!--<p>Run the following commands in the terminal then refresh the page.</p><ol><li><tt>roscore</tt></li><li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li><li><tt>rosrun tf2_web_republisher tf2_web_republisher</tt></li><li><tt>roslaunch openni_launch openni.launch depth_registration:=true</tt></li></ol>
--><canvas id="img_canvas"> </canvas>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/84378.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/84378.shtml
英文地址，請注明出處：http://en.pswp.cn/web/84378.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！