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）是一种近期收到广泛关注的剪枝算法。与之前大部分剪枝方法需要训练整个网…...
解决n+1查询数据库问题
文章目录 1. 问题描述2. 解决方法3. 总结 1. 问题描述 在写项目中，可能会碰到一个问题：通过查询表A得到一个list结果，再对list中的n个元素各查询一次关联的表B。形成对数据库执行n1次查询。这种代码会无形增加数据库的处理负担，影…...
DICOM 基础知识：深入理解DICOM数据结构与标签说明
目录 DICOM 图像概念 DICOM 图像关键特性： DICOM 文件结构 常见数据元素： 数据元素示例详解 DICOM-VR 数据类型说明 DICOM 标准支持的数据集 结语 DICOM 图像概念 DICOM（Digital Imaging and Communications in Medicine&…...
Git - 如何删除 push 过一次的文件链路追踪？
（以 target 文件夹为例）如果你已经在 .gitignore 中添加了 target/ 目录，但 target 文件夹仍然出现在 Git 的变更列表中，可能是因为它之前已经被添加到 Git 仓库中。即使你更新了 .gitignore，Git 仍然会跟踪这些文件。…...
软件测试学习总结
一.软件测试概念和目的 软件测试的概念： 测试模型（V模型） 软件测试就是在软件投入运行前，对软件需求分析、设计规格说明和编码实现的最终审查，它是软件质量保证的关键步骤。 通常对软件测试的定义有两种描述： 定义1：软件测试是为了发现错误而执行程序的过程 定义2：…...
c语言错题——#define对应的查找替换
文章目录 一、题目 提示：以下是本篇文章正文内容，下面案例可供参考 一、题目 分析 结构体向最长的char对齐，前两个位段元素一共42位，不足8位，合起来占1字节，最后一个单独1字节，一共3字节。另外…...
Visual Basic介绍及简单例子
Visual Basic（简称 VB）是一种由微软公司开发的包含协助开发环境的事件驱动编程语言。 一、主要特点 易于学习和使用： Visual Basic 具有直观的可视化开发环境，使用户可以通过拖放控件和设置属性的方式快速创建用户界面。对于初学者来说，这种方式非常容易上手，无需深入了…...
Matlab学习01-矩阵
目录 一，矩阵的创建 1，直接输入法创建矩阵 2，利用M文件创建矩阵 3，利用其它文本编辑器创建矩阵 二，矩阵的拼接 1，基本拼接 1） 水平方向的拼接 2）垂直方向的拼接 3…...
【复旦微FM33 MCU 外设开发指南】外设篇1——硬件除法器
前言 本系列基于复旦微FM33LC0系列单片机的DataSheet编写，旨在提供一些开发指南。 本文章及本系列其他文章将持续更新，本系列其它文章请跳转【复旦微FM33 MCU 外设开发指南】总集篇 本文章最后更新日期：2024/10/24 文章目录 前言用途工作流…...
在元神操作系统启动时自动执行任务脚本
1. 背景 本文主要介绍让元神操作系统启动时自动执行任务脚本的方法，适用于无人化任务执行目的。将任务脚本及相关的应用程序准备好之后，把装有元神操作系统的U盘插入目标电脑，然后打开电脑电源就会自动完成所设置的任务。 2. 方法 &#x…...
JAVA学习-练习试用Java实现“判断是否为等边三角形的方法”
问题： 定义一个三角形类（Triangle），包含三个边长（a, b, c）属性，并实现一个判断是否为等边三角形的方法。 解答思路： 下面是一个简单的 Triangle 类定义，其中包含了三个…...