-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (39 loc) · 1.72 KB
/
index.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
<!DOCTYPE html>
<!-- http://staging.ministry.de/ministry.2018.shopping-list/branches/morten/js-learning.html -->
<html>
<head>
<meta charset="utf-8">
<title>Einkaufsliste</title>
</head>
<body>
<div id="images">
<img src="pic/shoppinglist.png" alt="" height="300" width="auto">
<img src="pic/IMG_20180220_185049.jpg" alt="" height="300" width="auto">
</div>
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -->
<!-- <canvas id="canvas" width="256" height="256"></canvas> -->
<div>
<input id="grayscalebtn" value="Grayscale" type="button">
<input id="invertbtn" value="Invert" type="button">
<input id="monochrombtn" value="Monochrom" type="button">
<input id="fftBtn" type="button" value="FFT">
<div class="slidecontainer">
<p>Threshold slider:</p>
<input id="threshold" type="range" min="0" max="255" value="50">
</div>
</div>
<script src="javascript/Point.js"></script>
<script src="javascript/ImageManipulation.js"></script>
<script src="javascript/Debugger.js"></script>
<script src="javascript/TextObject.js"></script>
<script src="javascript/ObjectDetection.js"></script>
<script src="ShoppingList.js"></script>
<script>
document.querySelector('img:nth-child(1)').addEventListener('load', function(){
var sl = new ShoppingList(this);
sl.process();
document.getElementById('images').appendChild(sl.getCanvas());
});
</script>
</body>
</html>