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，一经查实，立即删除！

相关文章

PowerShell批量处理文件名称/内容的修改

PowerShell批量处理文件名称/内容的修改

在日常的文件管理与处理中&#xff0c;常常需要对大量文件名或文件内容进行修改&#xff0c;而手动逐个操作既繁琐又容易出错。PowerShell作为一种强大的脚本语言&#xff0c;为我们提供了高效批量处理文件名及内容修改的解决方案。通过编写简单的PowerShell脚本&#xff0c;可…
阅读更多...
GA3C（GPU/CPU混合式异步优势Actor-Critic）算法实现控制倒立摆

GA3C（GPU/CPU混合式异步优势Actor-Critic）算法实现控制倒立摆

GA3C算法实现倒立摆 完整代码在文章结尾 GA3C算法 GPU/CPU混合式异步优势AC算法&#xff0c;是由A3C算法进一步优化而来&#xff0c;为了更好利用GPU计算资源。 GA3C理论上与A3C相同&#xff0c;属于On-Policy。但由于存在延迟更新问题&#xff0c;导致用于策略更新的数据并…
阅读更多...
基础RAG实现，最佳入门选择（六）

基础RAG实现，最佳入门选择（六）

带有问题生成的文档增强RAG 通过问题生成使用文档增强来实现增强的RAG方法。通过为每个文本块生成相关问题&#xff0c;改进了检索过程&#xff0c;从而从语言模型中获得更好的响应。 具体实现步骤 1.数据摄取&#xff1a;从PDF文件中提取文本。 2.chunking&#xff1a;将文本…
阅读更多...
vue3 电商类网站实现规格的选择

vue3 电商类网站实现规格的选择

目前有一个这样的需求 类似淘宝 京东选择 但是在人家大厂给的数据我不清除是什么样子的 我这边后端给的数据 一开始是想把规格全部显示出来的 发现实现不了 后端的数据有限 因为必须选择一个颜色 才可以对应的第二个规格 才知道有没有库存 因为这个库存 是由两个规格决定…
阅读更多...
HarmonyOS5 音乐播放器app(一)：歌曲展示与收藏功能（附代码）

HarmonyOS5 音乐播放器app(一)：歌曲展示与收藏功能（附代码）

鸿蒙音乐应用开发&#xff1a;从收藏功能实现看状态管理与交互设计 在移动应用开发中&#xff0c;收藏功能是用户体验的重要组成部分。本文将以鸿蒙OS音乐应用为例&#xff0c;详细解析如何实现具有动画效果的收藏功能&#xff0c;涉及状态管理、组件通信和交互动画等核心技术…
阅读更多...
PHP函数大全参考代码

PHP函数大全参考代码

字符串相关操作函数 去除空格或其他字符 trim删除字符串两端空格或其他预定义字符rtrim删除字符串右边空格或其他预定义字符choprtrim() 的别名 chop() 与 Perl 的 chop() 函数有所不同&#xff0c;它会删除字符串的最后一个字符。ltrim删除字符串左边空格或其他预定义字符 字…
阅读更多...
Flowise工作流引擎的本地部署与远程访问实践

Flowise工作流引擎的本地部署与远程访问实践

文章目录 前言1. Docker安装Flowise2. Ubuntu安装Cpolar3. 配置Flowise公网地址4. 远程访问Flowise5. 固定Cpolar公网地址6. 固定地址访问 前言 当多数团队仍深陷传统数据处理框架的桎梏时&#xff0c;创新者已率先引入Flowise智能流程引擎&#xff0c;成功将面向大型语言模型…
阅读更多...
端侧AI+OS垂直创新研究报告

端侧AI+OS垂直创新研究报告

端侧AIOS垂直创新研究报告 摘要 端侧AIOS研究背景、核心创新点及产业价值 研究背景 随着AI技术的快速发展&#xff0c;端侧AI已成为2025年的重要技术趋势[4]。端侧AI是指将AI计算能力从云端迁移到终端设备上&#xff0c;实现本地化的智能处理。这一技术变革主要受到隐私安全…
阅读更多...
【JVM 07-运行时常量池重要组成部分-StringTable】

【JVM 07-运行时常量池重要组成部分-StringTable】

StringTable 笔记记录 1. 常量池、运行时常量池与字符串常量池(StringTable)的关系2. String str"a"放入字符串常量池的过程3. 常见面试题4. StringTable特性5.StringTable的位置变更5.1 为什么位置变换&#xff1f;5.2 位置变更演示 6. StringTable垃圾回收7. Strin…
阅读更多...
算法-每日一题（DAY10）打家劫舍

算法-每日一题（DAY10）打家劫舍

1.题目链接&#xff1a; 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 2.题目描述&#xff1a; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xf…
阅读更多...
android UI 布局

android UI 布局

一&#xff1a;约束布局 参考&#xff1a; 【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )_韩曙亮-2048 AI社区 以下是一个基于 ConstraintLayout 的简单 Android 示例&#xff0c;包含三个控件&#xff0…
阅读更多...
【K8S】详解Labels​​ 和 ​​Annotations

【K8S】详解Labels​​ 和 ​​Annotations

在 Kubernetes&#xff08;K8s&#xff09;中&#xff0c;​​Labels&#xff08;标签&#xff09;​​ 和 ​​Annotations&#xff08;注解&#xff09;​​ 都是用于为资源对象&#xff08;如 Pod、Service、Deployment&#xff09;附加元数据的机制&#xff0c;但它们在设计…
阅读更多...
系统模块编程与实现

系统模块编程与实现

设备类&#xff08;Device Class&#xff09;​​ 和 ​​设备节点&#xff08;Device Node&#xff09;​​是深入 Linux 设备管理和驱动模型的核心基础。它们就像“骨骼”与“门户”&#xff0c;共同构建了 Linux 与硬件交互的核心桥梁。 一、设备类与设备节点 1. ​​设备…
阅读更多...
视频压缩、码率与流媒体传输知识总结

视频压缩、码率与流媒体传输知识总结

&#x1f3a5; 视频压缩、码率与流媒体传输知识总结 本笔记整理了 I/P/B 帧结构、码率计算、文件大小估算、压缩格式对比、推流带宽建议等视频工程常见技术要点。 一、单帧与未压缩视频数据量估算 分辨率&#xff1a;19201080&#xff08;1080p&#xff09; 色深&#xff1a;…
阅读更多...
嵌入式C++学习路线

嵌入式C++学习路线

&#x1f680; 嵌入式C学习路线图 从C语言基础到嵌入式C高手的完整路径 &#x1f4cb; 学习进度追踪 总体目标&#xff1a; 20-26周完成全部学习内容 前置条件&#xff1a; C语言基础 STM32开发经验 学习方式&#xff1a; 理论学习 实践项目 阶段1: C基础过渡 (2-3周) 目标…
阅读更多...
VSCode1.101.1Win多语言语言编辑器便携版安装教程

VSCode1.101.1Win多语言语言编辑器便携版安装教程

软件下载 【名称】&#xff1a; VSCode1.101.1 【大小】&#xff1a; 120M 【语言】&#xff1a; 简体中文 【安装环境】&#xff1a; Win10/Win11 【迅雷网盘下载链接】&#xff08;务必手机注册&#xff09;&#xff1a; 迅雷 【网站下载链接】: 其他网盘 软件介绍 VSCod…
阅读更多...
ssh 服务和 rsync 数据同步

ssh 服务和 rsync 数据同步

目录 一、ssh服务 1、概述 2、命令解析 远程登录命令 远程拷贝命令 3、登录方式配置 1、用户名密码登录 2、公钥验证登录 二、rsync 数据同步 1、rsync概述 2、rsync运行原理 3、rsync部署 一、ssh服务 1、概述 ssh服务&#xff0c;一种远程管理连接工具&#xf…
阅读更多...
使用随机森林实现目标检测

使用随机森林实现目标检测

核心实现思路 滑动窗口策略&#xff1a;在图像上滑动固定大小的窗口&#xff0c;对每个窗口进行分类多维特征提取&#xff1a;结合统计特征、纹理特征、边缘特征、形状特征等随机森林分类&#xff1a;训练二分类器判断窗口是否包含目标后处理优化&#xff1a;使用非极大值抑制…
阅读更多...
3.6 move_base导航初体验

3.6 move_base导航初体验

1.环境搭建 在工作空间src下git wpr_simulation&#xff0c;安装install_for_noetic.sh&#xff0c;然后再回退工作空间进行编译 下载参数文件 git clone https://github.com/6-robot/wpb_home.git下载需要魔法&#xff0c;在这里可以使用手机热点进行平替 进入脚本文件夹 …
阅读更多...
Mysql高级——MVCC（多版本并发控制）

Mysql高级——MVCC（多版本并发控制）

MySQL MVCC&#xff08;多版本并发控制&#xff09;详解 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是 MySQL InnoDB 存储引擎实现的一种并发控制机制&#xff0c;用于在保证事务隔离性的同时&#xff0c;提高数据库的并发性能。下面从原理、实现、事务隔…
阅读更多...
最新文章

Copyright @ 2022~2023