-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpixel_coordinates.html
94 lines (83 loc) · 2.63 KB
/
pixel_coordinates.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<head>
<title>Get pixel coordinates</title>
</head>
<body>
<label> Change loaded image:
<input id="selectedImg" list="list1" oninput="selectedImgOnChange()"/></label>
<datalist id="list1">
<option value="I.png">
<option value="I1.jpg">
<option value="I2.jpg">
<option value="S.png">
<option value="imgS1.png">
<option value="imgS2.png">
<option value="imgS3gray.png">
<option value="J.jpg">
</datalist>
<button onclick="btn1Click()">reset</button>
<p>Pixel coordinate: <span id="msg">please click on the image</span></p>
<img id="img" alt="" src="I.png"/>
<br>
<textarea id="log" rows="40">
</textarea>
<script type="text/javascript">
const msg = document.getElementById("msg");
const selectedImg = document.getElementById("selectedImg");
const img = document.getElementById("img");
const log = document.getElementById("log");
img.onmousedown = GetCoordinates;
function selectedImgOnChange(e) {
msg.innerHTML = '';
img.setAttribute('src', selectedImg.value);
}
function FindPosition(oElement) {
if (typeof (oElement.offsetParent) != "undefined") {
for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [posX, posY];
} else {
return [oElement.x, oElement.y];
}
}
function GetCoordinates(e) {
var PosX = 0;
var PosY = 0;
var ImgPos;
ImgPos = FindPosition(img);
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
PosX = e.pageX;
PosY = e.pageY;
} else if (e.clientX || e.clientY) {
PosX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
PosY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
PosX = PosX - ImgPos[0];
PosY = PosY - ImgPos[1];
let str = `[${PosX}, ${PosY}, 1]`;
msg.innerHTML = str;
copyToClipboard(str);
log.value = log.value + str + ",\n" ;
}
function btn1Click(e) {
selectedImg.value = '';
}
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
</body>
</html>