用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）使用相同的密钥进行加密和解密。这意味着发送方和接收方必须共享相同…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...