菏泽正耀网站建设公司怎么样,删掉wordpress主题,北京seo网站诊断,余杭区网站建设设计公司一般用于图片打印文字或图片的坐标获取,代码来自AI有改动。
功能#xff1a;本地图选择后不上传直接可比划线条作为对角线得到矩形#xff0c;动态显示坐标
按下鼠标开始松开鼠标结束。有细微BUG但不影响坐标获取。
!DOCTYPE html
html langen本地图选择后不上传直接可比划线条作为对角线得到矩形动态显示坐标
按下鼠标开始松开鼠标结束。有细微BUG但不影响坐标获取。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDraw Rectangle on Image/titlestyle#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
bodyh2Draw Rectangle and Track Position/h2input typefile idimageUpload acceptimage/*div idcontainer/divh3Current Rectangle Info/h3textarea idcurrentInfo readonlyX: -, Y: -, Width: -, Height: -/textareah3Log of Rectangles/h3textarea idlogInfo readonly/textareascriptconst 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
