用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>

代码中还包含了创建右键菜单的功能,但相关的菜单项(清空画布和复制坐标)被注释掉了。如果想启用这些功能,只需取消注释相应的代码行即可。

自己动手实现业务代码,这只是代码片段,具体实现还需要根据业务需要做相应的更改;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

随想录 Day 69 并查集 107. 寻找存在的路径

随想录 Day 69 并查集 107. 寻找存在的路径 理论基础 int n 1005; // n根据题目中节点数量而定&#xff0c;一般比节点数量大一点就好 vector<int> father vector<int> (n, 0); // C里的一种数组结构// 并查集初始化 void init() {for (int i 0; i < n; i)…

20个Python字典映射技巧,让数据处理更高效

字典作为Python的日常工具&#xff0c;拥有快速查找、高效存储等特性&#xff0c;是数据处理的必备神器。让我们一起揭开它的15个隐藏技巧&#xff0c;让你的代码飞起来&#xff01; 1. 初始化小技巧&#xff1a;快速创建字典 # 使用zip函数结合列表&#xff0c;一键成字典 k…

数据治理如何评估

在当今数字化时代&#xff0c;数据被认为是企业的重要资产之一&#xff0c;而有效的数据治理则成为确保数据价值和可靠性的关键。数据治理不仅仅是关于数据的管理&#xff0c;更是关于组织如何评估、保护和优化数据资产的过程。经过数聚多年的项目经验&#xff0c;我们就来从企…

深入解析Java编写优雅代码的技巧(下)

# 深入解析Java编写优雅代码的技巧&#xff08;下&#xff09;在上一篇文章中&#xff0c;我们介绍了如何在Java中编写优雅代码的几种基本技巧&#xff0c;包括代码风格、命名规范、注释和编写简洁代码的原则。本文将继续探讨代码重构、设计模式和单元测试等高级技巧。## 4. 代…

AI绘画Stable Diffusion 超强一键去除图片中的物体,免费使用!

大家好&#xff0c;我是设计师阿威 在生成图像时总有一些不完美的小瑕疵&#xff0c;比如多余的物体或碍眼的水印&#xff0c;它们破坏了图片的美感。但别担心&#xff0c;今天我们将介绍一款神奇的工具——sd-webui-cleaner&#xff0c;它可以帮助我们使用Stable Diffusion轻…

docker使用及Dockerfile编写

docker 基础使用 Linux安装docker # Linux安装docker服务 sudo apt install docker.io# 把普通用户加入到docker组中&#xff08;解决docker ps权限问题&#xff0c;$USER通常为用户名&#xff09; sudo gpasswd -a $USER docker newgrp dockerdocker 环境路径配置 # 修改系…

Rust高性能日志库tklog0.0.8—支持mod设置参数

tklog是rust高性能结构化日志库&#xff0c;支持同步日志&#xff0c;异步日志&#xff0c;支持自定义日志的输出格式&#xff0c;支持按时间&#xff0c;按文件大小分割日志文件&#xff0c;支持日志文件压缩备份&#xff0c;支持官方日志库标准API&#xff0c;支持mod独立参数…

怎么将文件免费扫描?这篇文章教你几个文件扫描方法

随着时间的流逝&#xff0c;我们所珍藏的纸质文件可能会面临破损和丢失的风险。 为了确保这些宝贵的资料得到妥善保管&#xff0c;将它们转换为电子格式并存储于电脑中无疑是一个明智之举。 那么&#xff0c;我们应当如何将这些纸质资料转换为易于管理和访问的电子文档呢&…

CMake基础教程

用法 cmake -B build // 配置&#xff0c;在源码目录用 -B 直接创建 build 目录并生成 build/Makefile cmake --build build -j4 // 构建&#xff0c;Linux会调用make&#xff0c;Windows会调用devenv.exe cmake --version 定义 -DCMAKE_INSTALL_PREFIX/opt/openvdb-8.0 /…

C++必修:模版的入门到实践

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. 泛型编程 首先让我们来思考一个问题&#xff0c;如何实现一个交换函数&#x…

企业有必要使用OVSSL证书吗?

在数字化时代&#xff0c;SSL证书不仅仅是一种技术保障&#xff0c;它更是企业线上服务的重要组成部分。企业级OVSSL证书以其独特的优势&#xff0c;为企业带来了多重好处。 包含以下几点&#xff1a; 1、增强信任度&#xff1a;OV SSL证书在颁发前会对组织的身份进行验证&…

找出一个整型数组中的元素的最大值

这个问题在之前的文章中曾用其他方法解决&#xff0c;现在用类来处理&#xff0c;读者可以比较不同方法的特点。 编写程序&#xff1a; 运行结果&#xff1a; 程序分析&#xff1a; 程序看起来比较长&#xff0c;其实并不复杂&#xff0c;它包括以下3部分&#xff1a;…

Redis 基本配置

Redis的配置文件通常位于 /etc/redis/redis.conf。以下是一些常见的Redis配置选项和它们的说明&#xff1a; 基本配置 1. 绑定地址 bind 127.0.0.1默认情况下&#xff0c;Redis只监听本地接口。如果需要远程访问&#xff0c;可以修改成bind 0.0.0.0&#xff0c;不过这会带来…

GPT-5的未来:技术飞跃与社会影响

文章目录 GPT-5的未来&#xff1a;技术飞跃与社会影响技术上的飞跃GPT-5在技术上将包括几个重要的进步&#xff1a;对工作和日常生活的影响新应用场景和创新可能性挑战和应对策略面向未来的准备结语 GPT-5的未来&#xff1a;技术飞跃与社会影响 在美国达特茅斯工程学院周四公布…

生产实习Day13 ---- 神经网络模型介绍

文章目录 传统的神经网络模型注意力机制的引入注意力机制的本质Encoder-Decoder 框架注意力机制在 Encoder-Decoder 中的应用Self-Attention 机制Transformer 模型注意力机制的优势总结 传统的神经网络模型 在深度学习中&#xff0c;传统的神经网络模型&#xff0c;如循环神经…

【离散数学】图的随机生成和欧拉(回)路的确定(c语言实现)

实验要求 变量定义 因为如果我们使用局部变量&#xff0c;每一个函数都会使用这些变量&#xff0c;会让函数的参数越变越多。所以我们定义全局变量&#xff0c;这样就不用在参数中调用了。 #define MAX 100 int arrMap[MAX][MAX] { 0 };//图的矩阵 int degree[MAX] { 0 };…

[职场] 提升学历考研再就业有必要吗 #其他#知识分享

提升学历考研再就业有必要吗 有很多人觉得自己学历不够高&#xff0c;求职第一关可能就通过不了。因此想要继续攻读&#xff0c;最近有人问小编提升学历考研有必要吗&#xff1f;“硕士学历和三年的工作经验哪个更重要?” 这个还是要针对具体岗位而言。综合类型的岗位往往不需…

免费分享:2000-2020年中国长时间序列夜间灯光数据集(附下载方法)

夜间灯光数据集直观反映了地表夜间灯光亮度&#xff0c;进而揭示了人类活动强度&#xff0c;为分析城市扩张、人口迁移、经济发展等提供了连续、全面的视角&#xff0c;有助于深入理解中国城市化的历史进程和未来趋势。 数据简介 基于DMSP/OLS第四版非辐射定标夜间年平均灯光强…

【HW必备】用友NC-Cloud存在17处漏洞合集

漏洞简介 NC Cloud是用友公司推出的大型企业数字化平台。支持公有云、混合云、专属云的灵活部署模式。NC Cloud完全基于云原生架构&#xff0c;技术先进、性能稳定、自主安全可控&#xff0c;支撑大中型以及超大型集团企业N层多site混合云部署方案&#xff0c;支持整个系统高可…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第47课-动态切换内嵌blender展厅的壁画

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第47课-动态切换内嵌blender展厅的壁画 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编…