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）是一种近期收到广泛关注的剪枝算法。与之前大部分剪枝方法需要训练整个网…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...