4.5KB原生html+js+css实现图片打印位置的坐标和尺寸获取

一般用于图片打印文字或图片的坐标获取,代码来自AI有改动。

功能:本地图选择后不上传直接可比划线条作为对角线得到矩形,动态显示坐标

按下鼠标开始松开鼠标结束。有细微BUG但不影响坐标获取。

html 复制代码
<!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 size
        imageUpload.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 info
            if (rect) {
                rect.remove();
            }
            currentInfo.value = "X: -, Y: -, W: -, H: -";

            // Start drawing the rectangle
            startX = event.offsetX;
            startY = event.offsetY;
            isDrawing = true;

            // Create a new rectangle element
            rect = 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 position
            const 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 direction
            rect.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 display
            currentInfo.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 details
            const 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 textarea
            logInfo.value += `Rectangle - X: ${finalX}, Y: ${finalY}, W: ${finalWidth}, H: ${finalHeight}\n`;

            // Stop drawing for a new session
            isDrawing = false;
        });
    </script>
</body>
</html>
相关推荐
W.Y.B.G15 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript
渣哥23 分钟前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试
小六路23 分钟前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
SuperherRo25 分钟前
JS逆向-安全辅助项目&JSRpc远程调用&Burp插件autoDecode&浏览器拓展V_Jstools(上)
javascript·安全·项目
Bellafu66639 分钟前
selenium的css定位方式有哪些
css·selenium·tensorflow
Jonathan Star2 小时前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
我有一棵树2 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
果粒chenl2 小时前
React学习(四) --- Redux
javascript·学习·react.js
rising start3 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied3 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html