先去opencv官网下载opencv.js并自行准备相关图片。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello,OpenCV</title>
<style>
#container {min-height:300px;}
#canvasOutput, #imageSrc{
background:#ccc;
min-width:300px;
min-height:300px;
display:block;
float:left;
margin-left:20px;
}
</style>
<script async="" src="js/opencv.js" type="text/javascript" onload="onOpenCvReady()" onerror="onOpenCvError()"></script>
</head>
<body>
<div id="status">加载OpenCV......</div>
<input type="file" id="fileInput" name="file" accept="image/*">
<div id="container">
<img id="imageSrc" src="img/girl.jpg">
<canvas id="canvasOutput"></canvas>
</div>
<script type="text/javascript">
let cv_inited=false
let imgElement = document.getElementById('imageSrc')
let inputElement = document.getElementById('fileInput')
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0])
console.info(imgElement.src)
}, false)
imgElement.onload = function() {
gray_image()
}
function gray_image(){
if(!cv_inited) return
let mat = cv.imread(imgElement)//注意本地的图片不能直接处理,会有同源问题
cv.cvtColor(mat, mat, cv.COLOR_BGR2GRAY)
cv.imshow('canvasOutput', mat)
mat.delete()
}
function onOpenCvReady() {
document.getElementById('status').innerHTML = '<b>OpenCV准备完毕。</b>'
cv_inited=true
}
function onOpenCvError() {
document.getElementById('status').innerHTML = '<b>OpenCV加载异常!</b>'
}
</script>
</body>
</html>