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>