Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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="imageSrc1" alt="No Image" />
- <div class="caption">imageSrc <input type="file" id="fileInput1" name="file" /></div>
- </div>
- <div class="inputoutput">
- <img id="imageSrc2" alt="No Image" />
- <div class="caption">imageSrc <input type="file" id="fileInput2" name="file" /></div>
- </div>
- <div class="inputoutput">
- <button id="outputButton">Click</button>
- <canvas id="canvasOutput1" ></canvas>
- <canvas id="canvasOutput2" ></canvas>
- <div class="caption">canvasOutput</div>
- </div>
- </div>
- <script type="text/javascript">
- let imgElement1 = document.getElementById('imageSrc1');
- let imgElement2 = document.getElementById('imageSrc2');
- let inputElement1 = document.getElementById('fileInput1');
- let inputElement2 = document.getElementById('fileInput2');
- let outputButton = document.getElementById('outputButton');
- let mat1;
- let mat2;
- inputElement1.addEventListener('change', (e) => {
- imgElement1.src = URL.createObjectURL(e.target.files[0]);
- }, false);
- inputElement2.addEventListener('change', (e) => {
- imgElement2.src = URL.createObjectURL(e.target.files[0]);
- }, false);
- imgElement1.onload = function() {
- mat1 = cv.imread(imgElement1);
- };
- imgElement2.onload = function() {
- mat2 = cv.imread(imgElement2);
- };
- outputButton.onclick = function(){
- let dst = new cv.Mat();
- let mask = new cv.Mat();
- let dtype = -1;
- cv.add(mat1, mat2, dst, mask, dtype);
- console.log(dst);
- console.log(mask);
- cv.imshow('canvasOutput1', dst);
- mat1.delete(); mat2.delete(); dst.delete(); mask.delete();
- };
- function onOpenCvReady() {
- document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
- }
- </script>
- <script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment