mirror/opencv
1
0
Fork 0
mirror of https://github.com/opencv/opencv.git synced 2024-11-27 20:50:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use horizontal input/output images layout in OpenCV.js tutorials

Browse Source
This commit is contained in:
Ningxin Hu 2017-09-27 16:35:43 +08:00
parent 386f402e0c
commit 06d22af2bf
65 changed files with 1163 additions and 555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_basic_ops_roi.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_canny.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_colorspaces_inRange.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

4
doc/js_tutorials/js_assets/js_contour_features_area.html
View File

@ -19,11 +19,11 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<div>
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<div>
<p><strong>The area is: </strong><span id="areaOutput"></span></p>
</div>

26
doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_convexHull.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_fitLine.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

4
doc/js_tutorials/js_assets/js_contour_features_moments.html
View File

@ -19,11 +19,11 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<div>
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<div>
<p><strong>The m00 is: </strong><span id="momentsOutput"></span></p>
</div>
</div>

4
doc/js_tutorials/js_assets/js_contour_features_perimeter.html
View File

@ -19,11 +19,11 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<div>
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<div>
<p><strong>The perimeter is: </strong><span id="perimeterOutput"></span></p>
</div>
</div>

26
doc/js_tutorials/js_assets/js_contour_properties_transpose.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contours_begin_contours.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

33
doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
View File

@ -19,18 +19,27 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<div class="inputoutput">
<p><strong>The result is: </strong><span id="matchShapesOutput"></span></p>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<div>
<p><strong>The result is: </strong><span id="matchShapesOutput"></span></p>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

7
doc/js_tutorials/js_assets/js_example_style.css
View File

@ -45,10 +45,6 @@ button[disabled] {
color: red;
font-weight: bold;
}
.inputoutput {
margin-top: 1em;
margin-bottom: 1em;
}
.caption {
margin: 0;
font-weight: bold;
@ -69,3 +65,6 @@ button[disabled] {
.hidden {
display: none;
}
.small {
max-width: 300px;
}

26
doc/js_tutorials/js_assets/js_face_detection.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_filtering_blur.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_filtering_filter.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_filtering_medianBlur.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_fourier_transform_dft.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_grabcut_grabCut.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_gradients_Laplacian.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

36
doc/js_tutorials/js_assets/js_gradients_Sobel.html
View File

@ -19,18 +19,30 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutputx"></canvas>
<div class="caption">canvasOutputx</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutputy"></canvas>
<div class="caption">canvasOutputy</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutputx" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutputy" class="small"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutputx</div>
</td>
<td>
<div class="caption">canvasOutputy</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

36
doc/js_tutorials/js_assets/js_gradients_absSobel.html
View File

@ -19,18 +19,30 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput8U"></canvas>
<div class="caption">canvasOutput8U</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput64F"></canvas>
<div class="caption">canvasOutput64F</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutput8U" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutput64F" class="small"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput8U</div>
</td>
<td>
<div class="caption">canvasOutput64F</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

36
doc/js_tutorials/js_assets/js_histogram_backprojection_calcBackProject.html
View File

@ -19,18 +19,30 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="srcCanvasInput"></canvas>
<div class="caption">srcCanvasInput <input type="file" id="srcFileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="dstCanvasInput"></canvas>
<div class="caption">dstCanvasInput <input type="file" id="dstFileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="srcCanvasInput" class="small"></canvas>
</td>
<td>
<canvas id="dstCanvasInput" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutput" class="small"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">srcCanvasInput <input type="file" id="srcFileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">dstCanvasInput <input type="file" id="dstFileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

44
doc/js_tutorials/js_assets/js_image_arithmetics_bitwise.html
View File

@ -19,18 +19,38 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="imageCanvasInput"></canvas>
<div class="caption">imageCanvasInput <input type="file" id="imageFileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="logoCanvasInput"></canvas>
<div class="caption">logoCanvasInput <input type="file" id="logoFileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="imageCanvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">imageCanvasInput <input type="file" id="imageFileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
<tr>
<td>
<canvas id="logoCanvasInput"></canvas>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="caption">logoCanvasInput <input type="file" id="logoFileInput" name="file" accept="image/*" /></div>
</td>
<td>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_image_display.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_closing.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_erode.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_opening.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_setup_usage.html
View File

@ -9,14 +9,24 @@
<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" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<img id="imageSrc" alt="No Image" class="small" />
</td>
<td>
<canvas id="canvasOutput" class="small" height="300px"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script type="text/javascript">

44
doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
View File

@ -20,18 +20,38 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="imageCanvasInput"></canvas>
<div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="templateCanvasInput"></canvas>
<div class="caption">templateCanvasInput <input type="file" id="templateFileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="imageCanvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
<tr>
<td>
<canvas id="templateCanvasInput"></canvas>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="caption">templateCanvasInput <input type="file" id="templateFileInput" name="file" accept="image/*" /></div>
</td>
<td>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_thresholding_threshold.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

66
doc/js_tutorials/js_assets/js_trackbar.html
View File

@ -21,47 +21,31 @@
<b>trackbar</b>
<input type="range" id="trackbar" disabled value="50" min="0" max="100" step="1">
<label id="weightValue" ></label>
<div class="inputoutput">
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput1"></canvas>
</td>
<td>
<canvas id="canvasInput2"></canvas>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p class="caption">canvasInput1</p>
</td>
<td>
<p class="caption">canvasInput2</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<canvas id="canvasOutput"></canvas>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="caption">canvasOutput</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput1" class="small"></canvas>
</td>
<td>
<canvas id="canvasInput2" class="small"></canvas>
</td>
<td>
<canvas id="canvasOutput" class="small"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput1</div>
</td>
<td>
<div class="caption">canvasInput2</div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
</div>
<script src="utils.js" type="text/javascript"></script>

26
doc/js_tutorials/js_assets/js_watershed_background.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_watershed_foreground.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_watershed_threshold.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">

26
doc/js_tutorials/js_assets/js_watershed_watershed.html
View File

@ -19,14 +19,24 @@
<p class="err" id="errorMessage"></p>
</div>
<div>
<div class="inputoutput">
<canvas id="canvasInput"></canvas>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
<table cellpadding="0" cellspacing="0" width="0" border="0">
<tr>
<td>
<canvas id="canvasInput"></canvas>
</td>
<td>
<canvas id="canvasOutput"></canvas>
</td>
</tr>
<tr>
<td>
<div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
</td>
<td>
<div class="caption">canvasOutput</div>
</td>
</tr>
</table>
</div>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">