Skip to content

Instantly share code, notes, and snippets.

@uosotm

uosotm/index.html

Last active October 27, 2020 23:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uosotm/ed0abb918d4764a046566a5f76504a53 to your computer and use it in GitHub Desktop.
Save uosotm/ed0abb918d4764a046566a5f76504a53 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal usage of OpenCV.js with a single HTML file.
Raw
index.html
<!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