纯前端html实现图片坐标与尺寸（XY坐标及宽高）获取

纯前端html实现图片坐标与尺寸（XY坐标及宽高）获取。用于证书图片或pdf打印的坐标测定。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯html前端实现图片坐标与尺寸（XYWH）获取</title>
<meta name="author" content="yujianyue, 15058593138@qq.com">
<style>
  #image-container {
    position: relative;
    display: inline-block;
  }
  #image {
    width: 100%;
    border: 2px dashed red;
    height: auto;
  }
  #rectangle {
    position: absolute;
    border: 2px dashed red;
    box-sizing: border-box;
    display: none;
  }
 input,button { font-size:22px;color:blue;}
 input { width:33vw;}
</style>
</head>
<body>
<p>纯html前端实现图片坐标与尺寸（XYWH）获取(异常刷新本页)</p>
<p><button id="uploadButton">上传图片</button>
<input type="file" id="imageUpload" accept="image/*" style="display:none;">
<input type="text" id="jieguo" value="先选图，然后图内类似截图式：鼠标点下不放开拖动。"></p>

<div id="image-container">
  <img id="image" alt="背景图">
  <div id="rectangle"></div>
</div>

<script >
console.log("问题反馈电话:","15058593138");
console.log("问题反馈邮件:","15058593138@qq.com");
function $(objId){return document.getElementById(objId);}
const imageContainer = $('image-container');
const image = $('image'); const rectangle = $('rectangle');
const imageUpload = $('imageUpload');
const uploadButton = $('uploadButton');
let startX, startY, initialMouseX, initialMouseY;

// 初始化背景图
image.src = '202403.png';

// 监听文件选择事件
imageUpload.addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      image.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }
});

// 监听上传按钮点击事件
uploadButton.addEventListener('click', function() {
  imageUpload.click();
});

imageContainer.addEventListener('mousedown', (event) => {
  $('jieguo').value = ``; //innerHTML
  const rect = image.getBoundingClientRect();
  initialMouseX = event.clientX - rect.left;
  initialMouseY = event.clientY - rect.top;
  startX = initialMouseX;  startY = initialMouseY;
  rectangle.style.left = `${startX}px`;
  rectangle.style.top = `${startY}px`;
  rectangle.style.width = `8px`;
  rectangle.style.height = `8px`;
  rectangle.style.display = 'block';
});

imageContainer.addEventListener('mousemove', (event) => {
  if (event.buttons === 1) {
    const rect = image.getBoundingClientRect();
    const currentMouseX = event.clientX - rect.left;
    const currentMouseY = event.clientY - rect.top;
    const width = Math.abs(currentMouseX - startX);
    const height = Math.abs(currentMouseY - startY);
    rectangle.style.width = `${width}px`;
    rectangle.style.height = `${height}px`;
    rectangle.style.left = `${Math.min(startX, currentMouseX)}px`;
    rectangle.style.top = `${Math.min(startY, currentMouseY)}px`;
    displayCoordinatesAndSize();
  }
});

imageContainer.addEventListener('mouseup', () => {

});

function displayCoordinatesAndSize() {
  const wh = rectangle.offsetWidth;  const ht = rectangle.offsetHeight;
  const lf = rectangle.offsetLeft;  const tp = rectangle.offsetTop;
  console.log(`坐标:(${lf},${tp}),宽高:${wh},${ht}`);  
  $('jieguo').value = `坐标:X${lf}Y${tp},宽高:W${wh}H${ht}`; //innerHTML
}
</script>
</body>
<!--
参考用途：(辅助)以下系统的坐标测定。
pdf电子准考证查询下载系统(实证效果可照片)V1.0
php在线生成pdf选民证系统支持中文(小工具)
PHP生成pdf格式准考证带照片完整示范
-->
</html>