純前端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>?
)
`：專業指南與實戰示例)
)
