纯前端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 = ``; //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>