需要通过框选矩形的方式，获取图片上矩形坐标

收藏

需求：

在页面上动态显示工业现场摄像头拍摄的照片
用户通过框选或者点选的方式在图片上绘制一个矩形，据此获取到该矩形的左上角和右下角x,y坐标用于后续数据判断

请问有相关的解决方案或者插件可用吗？

Grayson.Shang · Grayson.Shang

大佬您好，现在没有相关的解决方案和插件可以做这个功能，咱们这个涉及到的问题其实比较多。
1、对接摄像头属于设备对接，不同的设备对接方式也不一样，没有固定的方案，需要参考对应设备的文档。
2、摄像头中看到的画面是动态的，即使点击视频中某一个地方，也不一定可以获取到坐标，因为不同的浏览器大小不一样，同一个浏览器缩放不一致
3、即使拿到坐标了，也并不能根据坐标获取到视频中的是什么。

apm69 · apm69

Grayson.Shang 发表于 2024-9-26 12:30
大佬您好，现在没有相关的解决方案和插件可以做这个功能，咱们这个涉及到的问题其实比较多。
1、对接摄像 ...

那么，退而求其次，有没有通过鼠标点击获取页面坐标的方法？

Grayson.Shang · Grayson.Shang

鼠标点击时的坐标位置是比较好获取的，并不难，通过给鼠标点击增加**即可，大佬可以参考一下这个帖子。
HTML JavaScript获取鼠标点击时的X和Y坐标|极客教程 (geek-docs.com)

apm69 · apm69

Grayson.Shang 发表于 2024-9-26 13:36
鼠标点击时的坐标位置是比较好获取的，并不难，通过给鼠标点击增加**即可，大佬可以参考一下这个帖子。
HT ...

请问，这个“获取鼠标点击事件”如何在活字格的页面中添加呢？

Grayson.Shang · Grayson.Shang

大佬您好，这个JS我也不是很熟，我简单介绍一下活字格的交互，这个主要是先要获取页面上的元素，然后在页面加载的时候执行JS即可。

活字格的操作如下：
1、给展示视频的单元格做一个class命名

2、在页面加载命令中，执行JavaScript命令，具体如下

document.getElementsByClassName("myClass")[0].addEventListener("click", function (event) {
var x = event.clientX;
var y = event.clientY;
console.log("X坐标：" + x);
console.log("Y坐标：" + y);
})

复制代码

这样点击中间区域，就可以获取到鼠标坐标

		自动登录	找回密码
密码			立即注册

[处理中] 需要通过框选矩形的方式，获取图片上矩形坐标

5 个回复

本帖子中包含更多资源

本帖子中包含更多资源

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证