用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）使用相同的密钥进行加密和解密。这意味着发送方和接收方必须共享相同…...
探索Pem电解槽三维仿真模型：聚焦氢气扩散
Pem电解槽三维仿真模型，阴极不通水，只考虑氢气的扩散，使用二次电流分布浓物质传递自由与多孔介质流，不使用水电解槽节点。最近在研究Pem电解槽的三维仿真模型，这里面有个挺有意思的设定，阴极不通水…...
Obsidian插件终极汉化指南：obsidian-i18n让英文插件秒变中文界面
Obsidian插件终极汉化指南：obsidian-i18n让英文插件秒变中文界面 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 你是否因为Obsidian插件的英文界面而头疼？面对"Backlink"、"Graph …...
告别PDF转换烦恼：Marker让学术文档秒变Markdown的完整指南
告别PDF转换烦恼：Marker让学术文档秒变Markdown的完整指南 【免费下载链接】marker 一个高效、准确的工具，能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式，支持多语言和复杂布局处理，可选集成 LLM 提升精度，…...
如何用RecastNavigation构建高效AI导航系统：5个实战技巧揭秘
如何用RecastNavigation构建高效AI导航系统：5个实战技巧揭秘 【免费下载链接】recastnavigation Navigation-mesh Toolset for Games 项目地址: https://gitcode.com/gh_mirrors/re/recastnavigation 你是否曾为游戏中的AI角色设计路径规划而头疼？…...
卷积神经网络原理与Baichuan-M2-32B医疗图像识别实战
卷积神经网络原理与Baichuan-M2-32B医疗图像识别实战 1. 引言 医疗图像识别一直是人工智能领域的重要应用方向。传统的图像识别方法往往需要大量的人工特征工程，而卷积神经网络的出现彻底改变了这一局面。今天，我们将深入探讨卷积神经网络的核心原理&a…...
全域软开关直流变换器TPEL论文仿真复现之旅
全域软开关直流变换器 TPEL论文仿真复现最近一头扎进了全域软开关直流变换器的研究里，主要在琢磨TPEL论文相关内容，那仿真复现就成了关键任务。今天就来和大家唠唠这个过程中的酸甜苦辣。 一、全域软开关直流变换器是啥？ 简单来说，…...
PyArmor解包终极指南：3种高效逆向分析技巧快速掌握代码解密核心技术
PyArmor解包终极指南：3种高效逆向分析技巧快速掌握代码解密核心技术 【免费下载链接】PyArmor-Unpacker A deobfuscator for PyArmor. 项目地址: https://gitcode.com/gh_mirrors/py/PyArmor-Unpacker PyArmor-Unpacker是一个专为Python开发者和安全研究人员…...
Vivado+Vitis双剑合璧：从零构建Zynq-7020的SD卡Linux系统启动镜像
VivadoVitis双剑合璧：从零构建Zynq-7020的SD卡Linux系统启动镜像 在嵌入式系统开发领域，Xilinx Zynq系列SoC凭借其独特的ARM处理器与FPGA可编程逻辑的完美结合，成为众多高性能嵌入式应用的理想选择。本文将带领开发者深入探索如何利用Vivado和…...
Windows Cleaner终极指南：一键解决C盘爆红和系统卡顿的开源神器
Windows Cleaner终极指南：一键解决C盘爆红和系统卡顿的开源神器 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否经常遇到C盘变红、系统卡顿、开…...
Qwen2.5-VL-7B-Instruct图文对话教程：上传图片提问、多轮追问、结果导出全流程
Qwen2.5-VL-7B-Instruct图文对话教程：上传图片提问、多轮追问、结果导出全流程 你是不是经常遇到这样的情况：拿到一张复杂的图表，想快速理解里面的数据；或者看到一张有趣的图片，想知道背后的故事；又或者需…...