纯前端html实现图片坐标与尺寸（XY坐标及宽高）获取
纯前端html实现图片坐标与尺寸（XY坐标及宽高）获取。用于证书图片或pdf打印的坐标测定。
<!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 = ``; //innerHTMLconst 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>