当前位置：首页 > article >正文

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

article 2024/11/1 9:55:07

一般用于图片打印文字或图片的坐标获取,代码来自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 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>

查看全文

http://www.kler.cn/a/374241.html