Image-preprocess/index.html at main · Droid-An/Image-preprocess · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Preprocessing for OCR</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://docs.opencv.org/4.x/opencv.js"></script>
</head>

<body>
    <h2>Image Preprocessing Tool</h2>
    <input type="file" id="upload" accept="image/*" />
    <p id="loadingMsg">Loading page...</p>
    <div class="tabs">
        <button data-template="simpleThresholdControlsTemplate" class="active">Simple Threshold</button>
        <button data-template="adaptiveThresholdControlsTemplate">Adaptive Threshold</button>
    </div>
    <div class="controls">
    </div>

    <main>
        <div class="canvas-container">
            <h3>Original Image</h3>
            <canvas id="canvasOriginal"></canvas>
        </div>

        <div class="canvas-container">
            <h3>Processed Image</h3>
            <canvas id="canvasProcessed"></canvas>
        </div>
    </main>
    <aside class="additional_options_info_box"></aside>
    <aside class="method_info_box"></aside>

    <footer>Project is using <a href="https://github.com/opencv/opencv">OpenCV library</a>.
        <a href="https://github.com/Droid-An/Image-preprocess">Project on GitHub</a>
    </footer>


    <!---TEMPLATES FOLLOW-->

    <template id="simpleThresholdControlsTemplate">
        <label>
            Threshold:
            <input type="range" id="threshold" min="0" max="255" value="128" />
            <p class="control value" id="thresholdValue"></p>
        </label>

        <label>
            Blur Radius:
            <input type="range" id="blur" min="1" max="25" step="2" value="1" />
            <p class="control value" id="blurValue"></p>
        </label>

        <label>
            Use Otsu's Binarization:
            <button id="OtsuBinarization">Click</button>
        </label>
    </template>
    <template id="adaptiveThresholdControlsTemplate">
        <label>
            Block Size:
            <input type="range" id="blockSize" min="3" max="25" step="2" value="11" />
            <p class="control value" id="blockSizeValue"></p>
        </label>

        <label>
            Constant (C):
            <input type="range" id="c" min="1" max="25" value="2" />
            <p class="control value" id="cValue"></p>
        </label>
    </template>


    <template id="downloadButtonTemplate">
        <button id="download">Download Processed Image</button>
    </template>

    <script type="module" src="script.mjs"></script>
</body>

</html>