opencvjs处理图片

最新推荐文章于 2025-04-05 09:27:02 发布

小楫轻舟丶

最新推荐文章于 2025-04-05 09:27:02 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lioldamon/article/details/107823133

版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

opencvjs处理图片的demo ,这里使用的base64

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<script src="opencv3.4.9.js" type="text/javascript"></script>
</head>
<body>
<textarea name="" id="base64Text" cols="30" rows="10"></textarea>

<input type="button" id="btn" value="处理">
<img src="" id="img1" alt="">
<img src="" id="img2" alt="">
<canvas id="canvasOutput" style="display: none"></canvas>
<script type="text/javascript">
var img1=document.getElementById('img1');
var img2=document.getElementById('img2');
var btn=document.getElementById('btn');
btn.onclick=function(){
  process()
}
function process(){
  var base64Text=document.getElementById('base64Text')
  var img=new Image();
  
  var base64=base64Text.value;
  img.src=base64;
  img1.src=base64
  img.onload=function(){
    let mat = cv.imread( img);
   let dst = new cv.Mat();

   let kernel = cv.matFromArray(3, 3, cv.CV_32F, [ 0, -1, 0, -1, 5, -1, 0, -1, 0]); //核
    cv.filter2D(mat, dst, mat.depth(), kernel); //卷积运算
    cv.convertScaleAbs(dst, dst); 
    
    canvas = document.createElement("canvas");
   cv.imshow('canvasOutput', dst);
   var canvasOutput=document.getElementById('canvasOutput')
   var bs=canvasOutput.toDataURL()
   console.log(bs)
   img2.src=bs
 
  }
}


</script>

</body>
</html>