Skip to content

Instantly share code, notes, and snippets.

@uosotm
Last active Oct 27, 2020
Embed
What would you like to do?
Minimal usage of OpenCV.js with a single HTML file.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello OpenCV.js</title>
</head>
<body>
<input type="file" id="input" name="file" />
<canvas id="output"></canvas>
<script src="https://docs.opencv.org/3.4.0/opencv.js"></script>
<script>
const image = new Image();
const input = document.getElementById('input');
input.addEventListener('change', (e) => {
image.src = URL.createObjectURL(e.target.files[0]);
}, false);
image.onload = function() {
const src = cv.imread(image);
const dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
cv.imshow('output', dst);
src.delete(); dst.delete();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment