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>
相关推荐
猿榜14 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间18 分钟前
阿幸课堂随机点名
android·开发语言·javascript
我要让全世界知道我很低调27 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab27 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined228 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
用户7579419949701 小时前
基于JavaScript的简易Git
javascript
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 小时前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽2 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风2 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript