-
Notifications
You must be signed in to change notification settings - Fork 0
/
segment.html
96 lines (84 loc) · 3.51 KB
/
segment.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
<canvas id="srcInput" ></canvas>
<div class="caption">srcInput</div>
</div>
<div class="inputoutput">
<canvas id="cropOutput" ></canvas>
<div class="caption">cropOutput</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
var cornerArray = [];
function getMousePosition(canvas, event) {
let rect = canvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
cornerArray.push([x, y]);
console.log(cornerArray );
}
let canvasElem = document.querySelector("canvas");
canvasElem.addEventListener("mousedown", function(e) {
getMousePosition(canvasElem, e);
if (cornerArray.length == 4) {
crop (src, cornerArray);
cornerArray = [];
}
});
function crop(src, cornerArray) {
let dst = new cv.Mat();
let a = cornerArray[0];
let b = cornerArray[1];
let c = cornerArray[2];
let d = cornerArray[3];
let corner1 = new cv.Point(a[0], a[1]);
let corner2 = new cv.Point(b[0], b[1]);
let corner3 = new cv.Point(c[0], c[1]);
let corner4 = new cv.Point(d[0], d[1]);
let cropArray = [{ corner: corner1 }, { corner: corner2 }, { corner: corner3 }, { corner: corner4 }];
cropArray.sort((item1, item2) => { return (item1.corner.y < item2.corner.y) ? -1 : (item1.corner.y > item2.corner.y) ? 1 : 0; }).slice(0, 5);
let tl = cropArray[0].corner.x < cropArray[1].corner.x ? cropArray[0] : cropArray[1];
let tr = cropArray[0].corner.x > cropArray[1].corner.x ? cropArray[0] : cropArray[1];
let bl = cropArray[2].corner.x < cropArray[3].corner.x ? cropArray[2] : cropArray[3];
let br = cropArray[2].corner.x > cropArray[3].corner.x ? cropArray[2] : cropArray[3];
let widthBottom = Math.hypot(br.corner.x - bl.corner.x, br.corner.y - bl.corner.y);
let widthTop = Math.hypot(tr.corner.x - tl.corner.x, tr.corner.y - tl.corner.y);
let theWidth = (widthBottom > widthTop) ? widthBottom : widthTop;
let heightRight = Math.hypot(tr.corner.x - br.corner.x, tr.corner.y - br.corner.y);
let heightLeft = Math.hypot(tl.corner.x - bl.corner.x, tr.corner.y - bl.corner.y);
let theHeight = (heightRight > heightLeft) ? heightRight : heightLeft;
let finalDestCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, theWidth - 1, 0, theWidth - 1, theHeight - 1, 0, theHeight - 1]); //
let srcCoords = cv.matFromArray(4, 1, cv.CV_32FC2, [tl.corner.x, tl.corner.y, tr.corner.x, tr.corner.y, br.corner.x, br.corner.y, bl.corner.x, bl.corner.y]);
let dsize = new cv.Size(theWidth, theHeight);
let M = cv.getPerspectiveTransform(srcCoords, finalDestCoords)
cv.warpPerspective(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
cv.imshow('cropOutput', dst);
}
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
src = cv.imread(imgElement);
cv.imshow("srcInput", src);
cornerArray = [];
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>