-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmarker.html
114 lines (102 loc) · 4.17 KB
/
marker.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<body>
<div>
page:
<button onclick="pageDom.value = Math.max(1, parseInt(pageDom.value, 10)-1); renderPage();"><prev</button>
<input type="text" id="page" value="1" size="4" onchange="renderPage()" />
<button onclick="pageDom.value = Math.min(files.length, parseInt(pageDom.value, 10)+1); renderPage();">next></button>
scale (%):
<button onclick="scaleDom.value = Math.max(10, parseInt(scaleDom.value, 10)-10); renderPage();">-</button>
<input type="text" id="scale" value="80" size="4" onchange="renderPage()" />
<button onclick="scaleDom.value = Math.min(100, parseInt(scaleDom.value, 10)+10); renderPage();">+</button>
</div>
<div>
current size: <span id="current_size"></span> (original: <span id="original_size"></span>)
</div>
<div>
selected area: <span id="selected_area"></span> (original: <span id="original_area"></span>)
</div>
<div>
convert arg: <input id="convert_arg" size="32" onclick="this.select();"></span>
</div>
<button
onclick="navigator.clipboard.writeText(document.getElementById('convert_arg').value); setTimeout(function() { window.close(); }, 1000);">
Go!
</button>
<div style="margin-top: 2em; position: relative;">
<img style="position: absolute; left: 0; top: 0;" id="pages" />
<canvas style="position: absolute; left: 0; top: 0;" id="rect"></canvas>
</div>
<script>
var files = location.search.substring(1).split(',');
var imageDom = document.getElementById('pages');
var rectDom = document.getElementById('rect');
var pageDom = document.getElementById('page');
var scaleDom = document.getElementById('scale');
var context = rectDom.getContext('2d');
var reacts = [];
var _rectangle = createRect();
function createRect() {
return { startY:0, startX:0, endY:0, endX:0 };
}
function onMouseDown (e) {
_rectangle.startY = e.layerY;
_rectangle.startX = e.layerX;
rectDom.addEventListener ("mousemove", onMouseMove, false);
}
function onMouseMove (e) {
draw(true);
_rectangle.endY = e.layerY - _rectangle.startY;
_rectangle.endX = e.layerX - _rectangle.startX;
context.lineWidth = 3;
context.strokeStyle = "rgb(255, 0, 0)";
context.strokeRect (_rectangle.startX, _rectangle.startY, _rectangle.endX, _rectangle.endY);
}
function onMouseUp (e) {
draw(true);
// _rectangle = createRect();
rectDom.removeEventListener ("mousemove", onMouseMove, false);
}
function normalize(r) {
return {
startX: Math.floor(Math.min(r.startX, r.startX + r.endX)),
startY: Math.floor(Math.min(r.startY, r.startY + r.endY)),
endX: Math.floor(Math.max(r.startX, r.startX + r.endX)),
endY: Math.floor(Math.max(r.startY, r.startY + r.endY)),
};
}
function draw(update) {
context.clearRect(0, 0, rectDom.width, rectDom.height);
context.lineWidth = 3;
context.strokeStyle = "rgb(255, 0, 0)";
var r = _rectangle;
context.strokeRect(r.startX, r.startY, r.endX, r.endY);
if (!update) { return; }
var n = normalize(_rectangle);
if (n.endX * n.endY === 0) {
document.getElementById('selected_area').innerText = '';
} else {
document.getElementById('selected_area').innerText = '(' + n.startX + ', ' + n.startY + ') - (' + n.endX + ', ' + n.endY + ')';
var s = parseInt(scaleDom.value, 10) / 100;
var t = {startX: Math.floor(n.startX/s), startY: Math.floor(n.startY/s), endX: Math.floor(n.endX/s), endY: Math.floor(n.endY/s)};
document.getElementById('original_area').innerText = '(' + t.startX + ', ' + t.startY + ') - (' + t.endX + ', ' + t.endY + ')';
document.getElementById('convert_arg').value = (t.endX-t.startX)+'x'+(t.endY-t.startY)+'+'+t.startX+'+'+t.startY;
}
}
function renderPage() {
var page = parseInt(pageDom.value, 10);
imageDom.src = files[page-1];
}
function resize() {
var width = imageDom.naturalWidth * scaleDom.value / 100;
var height = imageDom.naturalHeight * scaleDom.value / 100;
imageDom.style.width = width + 'px';
imageDom.style.height = height + 'px';
rectDom.width = width;
rectDom.height = height;
}
rectDom.addEventListener("mousedown", onMouseDown, false);
rectDom.addEventListener("mouseup" , onMouseUp , false);
imageDom.addEventListener('load', function() { resize(); draw(false); }, false);
renderPage();
</script>
</body>