Mridul97/imageaddition.html

## imageaddition.html
<!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>
	<!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>