下载
直访问 保存
https://docs.opencv.org/4.5.1/opencv.js
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<style type="text/css">
.inputoutput{
float: left;
margin: 10px;
}
</style>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script async src="js_canny.js" type="text/javascript"></script>
</head>
<body>
<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" />
</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
</body>
</html>
js
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let mat = cv.imread(imgElement);
mat = face2(mat, 4, 3);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
function face2(image, value1, value2)
{
let src = cv.imread(imgElement);
let dst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0);
// You can try more different parameters
cv.Canny(src, dst, 50, 100, 3, false);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();
}
4382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
