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）是一种近期收到广泛关注的剪枝算法。与之前大部分剪枝方法需要训练整个网…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全：…...
系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文通过代码驱动的方式，系统讲解PyTorch核心概念和实战技巧，涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...