data_preprocessing/boundingbox/index.html at main · Moobbot2/data_preprocessing · 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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounding Box with Canvas</title>
    <link rel="stylesheet" href="style.css">
</head>

<body onload="_bounding_box_init()">
    <div class="annotation_bounding_box">

        <div id="annotation_editor">
            <input type="file" id="imageInput" accept="image/*">
            <ul class="list_label">
                <li class="list_label_item" data-key="tieude" data-title="Tiêu đề minh chứng">
                    <button>Tiêu đề minh chứng</button>
                </li>
                <li class="list_label_item" data-key="ngay" data-title="Ngày ban hành">
                    <button>Ngày ban hành</button>
                </li>
                <li class="list_label_item" data-key="noigui" data-title="Nơi ban hành">
                    <button>Nơi ban hành</button>
                </li>
                <li class="list_label_item" data-key="soqd" data-title="Số quyết định">
                    <button>Số quyết định</button>
                </li>
            </ul>
            <div id="view_box"></div>
        </div>
        <div id="display_area">
            <h1>Bounding Box with Canvas - 2D Bounding Box Annotation</h1>
            <p>Coordinates: <span id="coordinates"></span></p>

            <div id="image_panel" class="display_area_content">
                <canvas id="region_canvas" width="1" height="1" tabindex="1">Sorry, your browser does not support HTML5
                    Canvas functionality, which is required for this application.</canvas>
                <img id="selectedImage" src="" alt="Selected Image" class="display_none">
            </div>
        </div>
    </div>

    <script>
        //Settings
        var _canvas_scale = 1.0;// Current scale of canvas image
        var _canvas_regions_start_x, _canvas_regions_start_y, _canvas_regions_end_x, _canvas_regions_end_y;

        //Image
        var image_input = document.getElementById('imageInput');
        var _current_image = document.getElementById('selectedImage');
        var _annotation_editor = document.getElementById('annotation_editor');
        var _display_area = document.getElementById('display_area');
        var image_panel = document.getElementById('image_panel');
        var _reg_canvas = document.getElementById('region_canvas');
        var _reg_ctx;// initialized in _bounding_box_init()

        var coordinates = document.getElementById('coordinates');
        var view_box = document.getElementById('view_box');
        var isDrawing = false;
        var startPoint = { x: 0, y: 0 };
        var endPoint = { x: 0, y: 0 };

        // Create an object to store the data
        var data_return = {};

        function _bounding_box_init() {
            _init_reg_canvas_context();
            addEventListeners();
        }

        function _init_reg_canvas_context() {
            _reg_ctx = _reg_canvas.getContext('2d');
        }

        function set_all_canvas_size(w, h) {
            _reg_canvas.height = h;
            _reg_canvas.width = w;
            image_panel.style.width = w + 'px';
            image_panel.style.height = h + 'px';
        }

        function clearBoundingBox() {
            _reg_ctx.clearRect(0, 0, _reg_canvas.width, _reg_canvas.height);
            _reg_ctx.drawImage(_current_image, 0, 0, region_canvas.width, region_canvas.height);
        }

        function drawBoundingBox() {
            _reg_ctx.strokeStyle = 'red';
            _reg_ctx.strokeRect(startPoint.x, startPoint.y, endPoint.x - startPoint.x, endPoint.y - startPoint.y);
        }

        function updateCoordinates() {
            _canvas_regions_start_x = Math.round(startPoint.x / _canvas_scale);
            _canvas_regions_start_y = Math.round(startPoint.y / _canvas_scale);
            _canvas_regions_end_x = Math.round(endPoint.x / _canvas_scale);
            _canvas_regions_end_y = Math.round(endPoint.y / _canvas_scale);
            coordinates.textContent = `Start X: ${_canvas_regions_start_x}, Start Y: ${_canvas_regions_start_y}, End X: ${_canvas_regions_end_x}, End Y: ${_canvas_regions_end_y}`;
        }

        function addEventListeners() {
            image_input.addEventListener('change', function (e) {
                e.preventDefault();
                const file = image_input.files[0];
                if (file) {
                    const reader = new FileReader();

                    reader.onload = function (event) {
                        _current_image.src = event.target.result;
                    };

                    reader.readAsDataURL(file);
                }
            });

            _current_image.addEventListener('load', function () {

                let _current_image_width = _current_image.naturalWidth;
                let _current_image_height = _current_image.naturalHeight;
                let canvas_w = image_panel.clientWidth - 20;
                _canvas_scale = canvas_w / _current_image_width;
                let canvas_h = _current_image_height * _canvas_scale;
                set_all_canvas_size(canvas_w, canvas_h);
                _reg_ctx.drawImage(_current_image, 0, 0, _reg_canvas.width, _reg_canvas.height);
            });

            // Event listener for mouse down
            _reg_canvas.addEventListener('mousedown', (e) => {
                isDrawing = true;
                const rect = _reg_canvas.getBoundingClientRect();
                startPoint = {
                    x: e.clientX - rect.left,
                    y: e.clientY - rect.top
                };
            });

            // Event listener for mouse move
            _reg_canvas.addEventListener('mousemove', (e) => {
                if (!isDrawing) return;
                const rect = _reg_canvas.getBoundingClientRect();
                endPoint = {
                    x: e.clientX - rect.left,
                    y: e.clientY - rect.top
                };

                clearBoundingBox();
                drawBoundingBox();
                updateCoordinates();
            });
            var currentLabelType = null;

            var listItems = document.querySelectorAll('.list_label_item');
            listItems.forEach(function (listItem) {
                listItem.addEventListener('click', function () {
                    currentLabelType = listItem.getAttribute('data-key');
                });
            });

            _reg_canvas.addEventListener('mouseup', () => {

                // Calculate the width and height of the bounding box
                var width = _canvas_regions_end_x - _canvas_regions_start_x;
                var height = _canvas_regions_end_y - _canvas_regions_start_y;

                // Create a temporary canvas to hold the cropped image
                var tempCanvas = document.createElement('canvas');
                var tempCtx = tempCanvas.getContext('2d');

                // Set the canvas size to the size of the bounding box
                tempCanvas.width = width;
                tempCanvas.height = height;

                // Crop the image
                tempCtx.drawImage(_current_image,
                    _canvas_regions_start_x, _canvas_regions_start_y, width, height,
                    0, 0, width, height);

                // Get the cropped image as a base64 data URL
                var croppedImageBase64 = tempCanvas.toDataURL();
                if (currentLabelType) {

                    // Check if the label already exists in data_return
                    if (data_return[currentLabelType]) {
                        // Append the new data to the existing label
                        Object.assign(data_return[currentLabelType], croppedImageBase64);
                    } else {
                        // Create a new label in data_return
                        data_return[currentLabelType] = croppedImageBase64;
                    }

                    // Do something with the cropped image, for example, display it or send it to the server
                    console.log("currentLabelType", currentLabelType);

                    // Reset the currentLabelType
                    currentLabelType = null;
                }

                // Clear the bounding box
                clearBoundingBox();
                console.log("Cropped Image Base64:", croppedImageBase64);

                // Update the coordinates display
                coordinates.textContent = '';
                isDrawing = false;
            });
        };
    </script>
</body>

</html>