4.5KB原生html+js+css实现图片打印位置的坐标和尺寸获取
一般用于图片打印文字或图片的坐标获取,代码来自AI有改动。
功能：本地图选择后不上传直接可比划线条作为对角线得到矩形，动态显示坐标
按下鼠标开始松开鼠标结束。有细微BUG但不影响坐标获取。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Draw Rectangle on Image</title><style>#container {position: relative;display: inline-block;border: 1px solid #333;cursor: crosshair;overflow: hidden;}.rectangle {position: absolute;border: 1px dashed red;background-color: rgba(255, 0, 0, 0.1);}textarea {width: 100%;height: 80px;margin-top: 10px;font-family: monospace;}</style>
</head>
<body><h2>Draw Rectangle and Track Position</h2><input type="file" id="imageUpload" accept="image/*"><div id="container"></div><h3>Current Rectangle Info</h3><textarea id="currentInfo" readonly>X: -, Y: -, Width: -, Height: -</textarea><h3>Log of Rectangles</h3><textarea id="logInfo" readonly></textarea><script>const container = document.getElementById('container');const imageUpload = document.getElementById('imageUpload');const currentInfo = document.getElementById('currentInfo');const logInfo = document.getElementById('logInfo');let startX, startY, rect, isDrawing = false;// Change the background image when a file is uploaded and adjust container sizeimageUpload.addEventListener('change', (event) => {const file = event.target.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {const img = new Image();img.onload = () => {container.style.width = `${img.width}px`;container.style.height = `${img.height}px`;container.style.backgroundImage = `url('${e.target.result}')`;};img.src = e.target.result;};reader.readAsDataURL(file);}});container.addEventListener('mousedown', (event) => {// Remove any previous rectangle and reset infoif (rect) {rect.remove();}currentInfo.value = "X: -, Y: -, W: -, H: -";// Start drawing the rectanglestartX = event.offsetX;startY = event.offsetY;isDrawing = true;// Create a new rectangle elementrect = document.createElement('div');rect.classList.add('rectangle');rect.style.left = `${startX}px`;rect.style.top = `${startY}px`;rect.style.width = `0px`;rect.style.height = `0px`;container.appendChild(rect);});container.addEventListener('mousemove', (event) => {if (!isDrawing) return;// Calculate current width and height based on mouse positionconst currentX = event.offsetX;const currentY = event.offsetY;const width = Math.abs(currentX - startX);const height = Math.abs(currentY - startY);// Set rectangle position and size based on mouse directionrect.style.left = `${Math.min(startX, currentX)}px`;rect.style.top = `${Math.min(startY, currentY)}px`;rect.style.width = `${width}px`;rect.style.height = `${height}px`;// Update the current info displaycurrentInfo.value = `X: ${Math.min(startX, currentX)}, Y: ${Math.min(startY, currentY)}, W: ${width}, H: ${height}`;});container.addEventListener('mouseup', (event) => {if (!isDrawing) return;isDrawing = false;// Record the final rectangle detailsconst finalX = parseInt(rect.style.left);const finalY = parseInt(rect.style.top);const finalWidth = parseInt(rect.style.width);const finalHeight = parseInt(rect.style.height);// Append the log information to the logInfo textarealogInfo.value += `Rectangle - X: ${finalX}, Y: ${finalY}, W: ${finalWidth}, H: ${finalHeight}\n`;// Stop drawing for a new sessionisDrawing = false;});</script>
</body>
</html>
相关文章：
4.5KB原生html+js+css实现图片打印位置的坐标和尺寸获取
一般用于图片打印文字或图片的坐标获取,代码来自AI有改动。 功能：本地图选择后不上传直接可比划线条作为对角线得到矩形，动态显示坐标 按下鼠标开始松开鼠标结束。有细微BUG但不影响坐标获取。 <!DOCTYPE html> <html lang"en">…...
智诊小助手-记录模式选择
记录模式总共有连续记录、硬件触发、软件触发、错误触发四种模式选择，并且在选择完记录模式后还可以设置保留触发点前报文条数、存储时间、录制通道、保存类型 配置过程如下： 点击下面右图中模式选择即可进入到左图中的参数配置界面 如上图选择的配置…...
JDBC: Java数据库连接的桥梁
什么是JDBC？ Java数据库连接（Java Database Connectivity，简称JDBC）是Java提供的一种API，允许Java应用程序与各种数据库进行交互。JDBC提供了一组标准的接口，开发者可以利用这些接口执行SQL语句、处理结果集…...
英伟达GPU算力【自用】
GPU（图形处理单元）算力的提升是驱动当代科技革命的核心力量之一，尤其在人工智能、深度学习、科学计算和超级计算机领域展现出了前所未有的影响力。2024年的GPU技术发展，不仅体现在游戏和图形处理的传统优势上，更在跨行…...
「C/C++」C++11 之 智能指针
✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…...
算法面试小抄
第一章:算法与数据结构要点速学 1.时间复杂度 (大 O) 首先，我们来谈谈常用操作的时间复杂度，按数据结构/算法划分。然后，我们将讨论给定输入大小的合理复杂性。 数组（动态数组/列表） 规定 n arr.length, 注意: &am…...
当有违法数据时，浏览器不解析，返回了undefined，导致数据不解析
现象：页面上没有看到数据 排查：断点到线上的源码里：1、协议回调确实没有拿到数据是个undefined 2、network里看服务确实响应了数据 3、控制台没有任何报错。 心情：莫名其妙的现象 我本地有json格式化工具，copy进去后&…...
在MySQL中ORDER BY使用的那种排序算法
在 MySQL 中，ORDER BY 子句的排序算法通常根据场景、数据量和表的索引情况而有所不同。MySQL 常用的排序算法包括： 文件排序（File Sort）：MySQL 没有使用索引排序的情况下，会进行文件排序，这可以…...
学习threejs，使用粒子实现雨滴特效
👨⚕️ 主页： gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏：threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.Points简介1.11 ☘️…...
分布式-单元化架构1
一 两地三中心 1.1 两地三中心* 两地指的是两个城市：同城，异地。三中心指的是三个数据中心：生产中心、同城容灾中心、异地容灾中心。 在同一个城市或者临近的城市建设两个相同的系统，双中心具备相当的业务处理能力，…...
C++模板、STL
目录 一、模板 1、函数模板 (1)、基本语法和使用 (2)、函数模板注意事项 (3)、普通函数与函数模板的区别 (4)、普通函数与函数模板的调用规则 (5)、模板的局限性 2、类模板 (1)、基本语法 (2)、类模板与函数模板区别 (3)、类模板中成员函数创建时机 (4)、类模板对象…...
计算机视觉中的点算子：从零开始构建
Hey小伙伴们！今天我们要聊的是一个非常基础但极其重要的计算机视觉技术——点算子（Point Operators）。点算子主要用于对图像的每个像素进行独立的处理，比如亮度调整、对比度增强、灰度化等。通过这些简单的操作，我们可…...
国际中文教育知识图谱问答
你还在为毕业设计头疼么？想快速搭建一个智能化系统，展示数据又能精准回答问题？那你绝对不能错过这个超实用的 知识图谱问答系统，特别适用于需要整合复杂数据关系、交互性强的项目！ 这个系统基于 Neo4j图数据库 开发&a…...
酒店大板轻触开关与传统的开关有什么区别
酒店大板轻触开关与传统的开关在功能、设计、使用方式以及安装维护等多个方面都存在显著的差异。以下是对这些差异的详细分析： 功能差异 酒店大板轻触开关： 多功能性：酒店大板轻触开关通常集成了多种功能，如控制照明、窗帘、夜灯、…...
【蓝桥杯选拔赛真题78】python电话号码 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析
目录 python电话号码 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python电话号码 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要…...
对比两个json串的diff，支持map的深度递归
背景 项目重构，对老接口进行技术改造。动代码后，难免会有些bug，我们需要对比改造前后接口的返回，来判断逻辑是否有问题，这就涉及两个json的对比。 常规的diff文本工具是按行对比，无法处理复杂的map。本文通…...
【我的创作纪念日1024】
我的创作纪念日1024 机缘成就明年的规划 机缘 过去的1024个日子里，我在专业发展、职场和发展、科技创新创业、软件开发、人工智能、虚拟现实、区块链等栏目分享了一些工作和学习的建议和体会。尤其是在2022年，我连续发布100篇的博文，不仅仅是…...
萤石设备视频接入平台EasyCVR私有化视频平台变电站如何实现远程集中监控？
一、方案背景 随着城市经济的发展和电力系统的改造，变电站的数量和规模逐渐增加，对变电站的安全管理和监控需求也越来越高。视频监控系统作为重要的安全管理手段，在变电站中起到了关键的作用。 目前青犀视频研发的萤石设备视频接入平台EasyC…...
什么是多线程？请描述 Java 中实现多线程的基本方式？
今天和大家探讨一下 Java 中的多线程，包括它的基本概念、实现方式以及一些实际开发中的注意事项。 什么是多线程？ 多线程是指在一个程序中存在多个执行流，每个执行流都可以独立于其他执行流执行。 在 Java 中，多线程允许开发者…...
Dynamic Sparse No Training: Training-Free Fine-tuning for Sparse LLMs
大语言模型（LLM）在设备上部署道路上落下了一个令人生畏的障碍。本文关注于大语言模型的剪枝算法。 动态稀疏训练（Dynamic Sparse Training，DST）是一种近期收到广泛关注的剪枝算法。与之前大部分剪枝方法需要训练整个网…...
Xenium空间原位转录组：从数据到生物学发现的实战解析
1. Xenium平台与空间原位转录组技术初探 第一次接触Xenium平台的数据时，我被它呈现的空间基因表达图谱震撼到了。想象一下，这就像给组织切片拍了一张"基因表达照片"，每个像素点都记录着成百上千个基因的活动状态。10x Genomics推出…...
双屏天花板用法！YogaBook 9i 多屏操作全演示
YogaBook 9i 作为双屏笔记本里的标志性机型，凭借两块高素质触控屏带来了完全不同于传统电脑的使用体验，但不少用户拿到手只当普通笔记本使用，没能发挥双屏协同的真正效率，多屏联动、分屏操作、跨屏交互这些核心亮点都被白白浪费。…...
版本原始安装。)
OpenClaw 部署指南 (Linux)版本原始安装。
OpenClaw 部署指南 (Linux)版 这阵子工作忙得离谱，连折腾新东西的时间都没有。 “龙虾”的风吹过了，寻思着也不能一直当吃瓜群众，就跟一手，看看这玩意到底有多神。 老规矩，不整那些花里胡哨的，先本地跑起来再说。一步一步来，比一上来就搞什么生产环境靠谱多了。 这几…...
大模型“预训练”是怎么回事
经常在想，大模型是怎么学会“理解和生成语言”的。仔细看，它的训练过程其实很有规律，简单讲可以拆解成几个步骤。数据准备 训练大模型之前，最重要的是数据。我看到的做法是从各种网络资源收集海量文本，比如网页、书籍、…...
万物皆含意识：基于 OFIRM 框架下“信息闭合与自动确认”机制的本体论重构（声明：这是一个理论假说）
万物皆含意识：基于 OFIRM 框架下“信息闭合与自动确认”机制的本体论重构——对德布罗意物质波假说的对称性扩展与量子测量问题的去玄学化解作者：Haiting Allen Chen对应理论：本源场直觉共振模型 (OFIRM)___________________________________…...
SEO_为什么你的网站需要SEO？关键原因解析
<h3 id"seoseo">SEO:为什么你的网站需要SEO？关键原因解析</h3> <p>在当今数字化时代，拥有一个网站是企业或个人展示品牌、产品和服务的重要途径。仅仅拥有一个网站并不足以吸引足够的访问量和客户。这时，SEO&…...
VSCode配置STM32标准库开发环境：手把手解决core_cm3.c编译报错与头文件路径问题
VSCode搭建STM32开发环境：解决标准库兼容性与智能感知难题 当开发者从Keil或IAR转向VSCode时，往往会遇到两个棘手的拦路虎：标准库与GCC的兼容性问题，以及代码智能感知的缺失。本文将深入解决这两个核心痛点，带你构建一…...
数据迁移技术指南：Obsidian跨平台笔记整合解决方案
数据迁移技术指南：Obsidian跨平台笔记整合解决方案 【免费下载链接】obsidian-importer Obsidian Importer lets you import notes from other apps and file formats into your Obsidian vault. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-importer …...
CTF是什么？一文带你读懂网络安全大赛
CTF是什么？一文带你读懂网络安全大赛 前言 随着大数据、人工智能的发展，人们步入了新的时代，逐渐走上科技的巅峰。 科技是一把双刃剑，网络安全不容忽视，人们的隐私在大数据面前暴露无遗，账户被盗、资金损失…...
OpenClaw安全加固：nanobot镜像的权限控制最佳实践
OpenClaw安全加固：nanobot镜像的权限控制最佳实践 1. 为什么需要关注OpenClaw的安全配置 去年夏天，我在本地部署OpenClaw时犯过一个致命错误——直接以管理员权限运行了未经审查的自动化脚本。结果这个脚本在半夜执行时误删了我整个项目目录的源码&…...