用JavaScript实现了一个简单的图像坐标点标注工具
这段代码实现了一个简单的图像标注工具，允许用户在加载的图像上进行点选标注，并且通过右键确认一个点序列来形成一个多边形。
标注效果如下
实现代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Image Annotation</title><style>canvas {border: 1px solid black; /* 给画布添加边框 */}</style>
</head>
<body><!-- 文件输入控件 -->
<input type="file" id="file-input">
<!-- 用于显示图像和标注的画布 -->
<canvas id="image-canvas"></canvas><script>const fileInput = document.getElementById('file-input'); // 获取文件输入元素const canvas = document.getElementById('image-canvas'); // 获取画布元素const ctx = canvas.getContext('2d'); // 获取画布的2D渲染上下文let drawing = false; // 标记是否正在绘图let ix = -1, iy = -1; // 当前鼠标位置的坐标let points = []; // 当前正在绘制的点列表let pointList = []; // 已完成的点列表// 当选择文件时触发fileInput.addEventListener('change', function (event) {const file = event.target.files[0]; // 获取选择的文件const reader = new FileReader(); // 创建文件读取器// 文件读取完成后执行reader.onload = function (event) {const img = new Image(); // 创建图像对象img.src = event.target.result; // 将读取的数据赋值给图像源// 图像加载完成后执行img.onload = function () {canvas.width = img.width; // 设置画布宽度为图像宽度canvas.height = img.height; // 设置画布高度为图像高度ctx.drawImage(img, 0, 0); // 在画布上绘制图像};};reader.readAsDataURL(file); // 开始读取文件});// 右键菜单处理canvas.addEventListener('contextmenu', (event) => {event.preventDefault(); // 阻止默认的右键菜单// 创建自定义菜单const menu = document.createElement('div');menu.style.position = 'absolute';menu.style.left = event.clientX + 'px';menu.style.top = event.clientY + 'px';menu.style.backgroundColor = 'white';menu.style.border = '1px solid black';// 清空画布菜单项const clearItem = document.createElement('div');clearItem.textContent = '清空画布';clearItem.style.padding = '5px';clearItem.addEventListener('click', () => {//ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布// 恢复绘图状态ctx.restore();menu.remove(); // 移除菜单});//menu.appendChild(clearItem);// 复制坐标菜单项const copyItem = document.createElement('div');copyItem.textContent = '复制坐标';copyItem.style.padding = '5px';copyItem.addEventListener('click', () => {if (pointList.length > 0) {navigator.clipboard.writeText("(" + pointList[pointList.length - 1].join('),(') + ")");alert('坐标已复制到剪贴板');}menu.remove(); // 移除菜单});//menu.appendChild(copyItem);document.body.appendChild(menu); // 将菜单添加到页面return false;});// 鼠标按下事件canvas.addEventListener('mousedown', function (event) {if (event.button === 0) { // 左键点击drawing = true;[ix, iy] = [event.offsetX, event.offsetY]; // 获取鼠标位置points.push([ix, iy]); // 添加到点列表drawCircle(ix, iy); // 绘制点drawText(ix, iy); // 绘制点坐标文本} else if (event.button === 2) { // 右键点击if (points.length > 1) {ctx.beginPath();ctx.moveTo(points[points.length - 1][0], points[points.length - 1][1]);ctx.lineTo(points[0][0], points[0][1]);ctx.strokeStyle = 'green';ctx.lineWidth = 2;ctx.stroke();pointList.push([...points]);console.log(points);//navigator.clipboard.writeText("(" + points.join('),(') + ")");points = [];}ctx.drawImage(canvas, 0, 0);}});// 鼠标抬起事件canvas.addEventListener('mouseup', function (event) {if (event.button === 0) {drawing = false;if (points.length > 1) {ctx.beginPath();ctx.moveTo(points[points.length - 2][0], points[points.length - 2][1]);ctx.lineTo(points[points.length - 1][0], points[points.length - 1][1]);ctx.strokeStyle = 'green';ctx.lineWidth = 2;ctx.stroke();}ctx.drawImage(canvas, 0, 0);}});// 鼠标移出画布事件canvas.addEventListener('mouseout', function () {drawing = false;});// 绘制点函数function drawCircle(x, y) {ctx.beginPath();ctx.arc(x, y, 3, 0, Math.PI * 2);ctx.fillStyle = 'blue';ctx.fill();}// 绘制点坐标文本函数function drawText(x, y) {ctx.font = '16px Arial';ctx.fillStyle = 'red';let text = "(" + x + "," + y + ")";ctx.fillText(text, x, y);}</script></body>
</html>代码中还包含了创建右键菜单的功能，但相关的菜单项（清空画布和复制坐标）被注释掉了。如果想启用这些功能，只需取消注释相应的代码行即可。
自己动手实现业务代码，这只是代码片段，具体实现还需要根据业务需要做相应的更改；
相关文章：
用JavaScript实现了一个简单的图像坐标点标注工具
这段代码实现了一个简单的图像标注工具，允许用户在加载的图像上进行点选标注，并且通过右键确认一个点序列来形成一个多边形。 标注效果如下 实现代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"U…...
Pytorch深度解析：Transformer嵌入层源码逐行解读
前言 本部分博客需要先阅读博客： 《Transformer实现以及Pytorch源码解读（一）-数据输入篇》 作为知识储备。 Embedding使用方式 如下面的代码中所示，embedding一般是先实例化nn.Embedding(vocab_size, embedding_dim)。实例化的…...
HSP_10章 Python面向对象编程oop_基础部分
文章目录 P107 类与实例的关系1.类与实例的关系示意图2.类与实例的代码分析 P109 对象形式和传参机制1. 类与对象的区别和联系2. 属性/成员变量3. 类的定义和使用4. 对象的传递机制 P110 对象的布尔值P111 成员方法1. 基本介绍2. 成员方法的定义和基本使用3.注意事项和使用细节…...
JavaWeb系列十七: jQuery选择器 上
jQuery选择器 jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”);$(“tagName”) 等价…...
Gone框架介绍30 - 使用`goner/gin`提供Web服务
gone是可以高效开发Web服务的Golang依赖注入框架 github地址：https://github.com/gone-io/gone 文档地址：https://goner.fun/zh/ 使用goner/gin提供Web服务 文章目录 使用goner/gin提供Web服务注册相关的Goners编写Controller挂载路由路由处理函数io.Rea…...
Lipowerline5.0 雷达电力应用软件下载使用
1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:289…...
STM32学习之一：什么是STM32
目录 1.什么是STM32 2.STM32命名规则 3.STM32外设资源 4. STM32的系统架构 5. 从0到1搭建一个STM32工程 学习stm32已经很久了，因为种种原因，也有很久一段时间没接触过stm32了。等我捡起来的时候，发现很多都已经忘记了，重新捡…...
AI绘画Stable Diffusion 超强一键去除图片中的物体，免费使用！
大家好，我是设计师阿威 在生成图像时总有一些不完美的小瑕疵，比如多余的物体或碍眼的水印，它们破坏了图片的美感。但别担心，今天我们将介绍一款神奇的工具——sd-webui-cleaner，它可以帮助我们使用Stable Diffusion轻…...
零基础STM32单片机编程入门(一)初识STM32单片机
文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据…...
Github上前十大开源Rust项目
在github上排名前十的Rust开源项目整理出来与大家共享，以当前的Star数为准。 Deno Deno 是 V8 上的安全 TypeScript 运行时。Deno 是一个建立在V8、Rust和Tokio之上的 JavaScript、TypeScript 和 WebAssembly 的运行时环境，具有自带安全的设置和出色的开…...
硬件开发笔记（二十）：AD21导入外部下载的元器件原理图库、封装库和3D模型
若该文为原创文章，转载请注明原文出处 本文章博客地址：https://hpzwl.blog.csdn.net/article/details/139707771 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV…...
竞赛选题 python opencv 深度学习 指纹识别算法实现
1 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 python opencv 深度学习 指纹识别算法实现 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数：3分工作量：4分创新点：4分 该项目较为新颖…...
RK3568开发笔记（三）：瑞芯微RK3588芯片介绍，入手开发板的核心板介绍
若该文为原创文章，转载请注明原文出处 本文章博客地址：https://hpzwl.blog.csdn.net/article/details/139905873 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV…...
-- 如何将Igh移植到Linux/Windows/RTOS等多操作系统)
EtherCAT主站IgH解析(二)-- 如何将Igh移植到Linux/Windows/RTOS等多操作系统
版权声明：本文为本文为博主原创文章，转载请注明出处 https://www.cnblogs.com/wsg1100 如有错误，欢迎指正。 本文简单介绍如何将 igh 移植到 zephyr、freertos、rtems、rtthread等RTOS ，甚至 windows 上。 ##前言 目前࿰…...
ansible copy模块参选选项
copy模块用于将文件从ansible控制节点（管理主机）或者远程主机复制到远程主机上。其操作类似于scp（secure copy protocol）。 关键参数标红。 参数： src:（source：源） 要复制到远程…...
展厅设计主要的六大要素
1、从创意开始 展示设计的开始必须创意在先。根据整体的风格思路进行创意，首先要考虑的是主体的造型、大小高度位置以及它和周围展厅的关系。另外其他道具设计制作与运作方式也必须在创意中有明确的体现。 2、平面感 平面感是指对展示艺术设计平面图纸审美和功能两个…...
【数据结构与算法】最小生成树,Prim算法,Kruskal算法 详解
最小生成树的实际应用背景。 最节省经费的前提下，在n个城市之间建立通信联络网。 Kruskal算法（基于并查集） void init() {for (int i 1; i < n; i) {pre[i] i;} }ll root(ll a) {ll i a;while (pre[i] ! i) {i pre[i];}return i p…...
【启明智显产品分享】Model3工业级HMI芯片详解系列专题（三）：安全、稳定、高防护
芯片作为电子设备的核心部件，，根据不同的应用领域被分为不同等级。工业级芯片适用于工业自动化、控制系统和仪器仪表等领域，对芯片的安全、稳定、防护能力等等有着较高的要求。这些芯片往往需要具备更宽的工业温度范围，能够在更恶…...
【面试干货】Java中的四种引用类型：强引用、软引用、弱引用和虚引用
【面试干货】Java中的四种引用类型：强引用、软引用、弱引用和虚引用 1、强引用（Strong Reference）2、软引用（Soft Reference）3、弱引用（Weak Reference）4、虚引用（Phantom Reference…...
对称/非对称加密
对称加密和非对称加密是两种主要的加密方式，用于保护数据的机密性和完整性。它们在密钥的使用和管理上有着显著的不同。 对称加密 原理 对称加密（Symmetric Encryption）使用相同的密钥进行加密和解密。这意味着发送方和接收方必须共享相同…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...