前端如何使用openCV（前端如何使用rpc）
haoteby 2025-05-02 18:28 62 浏览
前端如何使用openCV
简介
OpenCV(Open Source Computer Vision Library)，是一个在图像处理和识别上很强大的库，最开始只有C++版本，但现在构建了各种不同语言的版本，比如Python和Java，甚至是JavaScript，本文要介绍的就是JavaScript版本的OpenCV.js。
如何获取OpenCV.js
1、官方编译好的版本下载地址为：
https://docs.opencv.org/_VERSION_/opencv.js
其中 VERSION 换成你想要的版本。
目前最新的是 4.5.3 版本，那么下载地址就是
https://docs.opencv.org/4.5.3/opencv.js
2、参照官方文档自行构建OpenCV.js
实现一个简单的处理
图片灰度处理效果：
<!DOCTYPE html>
<html>
<head>
<title>OpenCV.js</title>
<style type="text/css">
.wrap-image {
display: flex;
flex-direction: row;
margin-top: 10px;
}
.wrap-image img,
.wrap-image canvas {
width: 300px;
margin-right: 10px;
}
</style>
</head>
<body>
<h3 id="status">Loading the Opencv ...</h3>
<input type="file" id="fileInput"/>
<div class="wrap-image">
<img id="imageUpload" alt="No Image" />
<canvas id="canvasOutput"></canvas>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageUpload');
let inputElement = document.getElementById('fileInput');
inputElement.onchange = function() {
imgElement.src = URL.createObjectURL(event.target.files[0]);
}
imgElement.onload =function() {
let src = cv.imread('imageUpload');
let dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();
};
function onOpenCvReady() {
document.getElementById('status').remove();
}
</script>
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>代码解析：
1、opencv.js很大，载入时需要加上async，并设定onload来检测是否载入完成。
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>2、记得及时清理Mat对象，释放内存。
src.delete();
dst.delete();3、imread和imshow 必须转入 <img /> 或 <canvas /> 的 id 或是 DOM。
下载图片
图片处理好了，用户想要下载，那就在html中加上下载链接：
<a href="#" id="downloadButton">下载</a>然后把下面的JavaScript加到之前的script标签中：
document.getElementById('downloadButton').onclick = function() {
this.href = document.getElementById('canvasOutput').toDataURL();
this.download = 'image.png';
};总结
一旦你习惯了将图像作为Mat对象来操作，你就可以做更多的事情了,你可以在OpenCV的网站上找到更多的教程，包括人脸识别和模板匹配等等。
相关推荐
- 如何为MySQL服务器和客户机启用SSL?
-
用户想要与MySQL服务器建立一条安全连接时，常常依赖VPN隧道或SSH隧道。不过，获得MySQL连接的另一个办法是，启用MySQL服务器上的SSL封装器(SSLwrapper)。这每一种方法各有其...
- k8s 证书问题排查_k8s dashboard 证书
-
从去年开始一些老项目上陆陆续续出现一些列的证书问题，（证书原理这里就不说了，官方文档一堆）多数刚开始的表现就是节点的kubelet服务起不来，节点状态NotReady表现日志如下failed...
- 企业级网络互通方案:云端OpenVPN+爱快路由器+Win11互联实战
-
企业级网络互通方案：OpenVPN搭建公有云+爱快路由器+Win11三地互联实战指南「安全高效」三地局域网秒变局域网实施环境说明...
- OpenV** Server/Client配置文件详解
-
Server配置详解...
- 接口基础认知:关键信息与合规前提
-
1.核心技术参数（必记）...
- S交换机通过SSH登录设备配置示例(RADIUS认证+本地认证独立)
-
说明：●本示例只介绍设备的认证相关配置，请同时确保已在RADIUS服务器上做了相关配置，如设备地址、共享密钥、创建用户等配置。●通过不同的管理域来实现RADIUS认证与本地认证两种方式同时使用，两...
- SSL证书如何去除私钥密码保护_ssl证书怎么取消
-
有时候我们在生成证书的时候可以加入了密码保护。然后申请到证书安装到了web服务器。但是这样可能会带来麻烦。每次重启apache或者nginx的时候，都需要输入密码。那么SSL证书如何去除私钥密码保护。...
- SSL证书基础知识与自签名证书生成指南
-
一、证书文件类型解析...
- S交换机通过SSH登录设备配置示例(RADIUS认证)
-
说明：本示例只介绍设备的认证相关配置，请同时确保已在RADIUS服务器上做了相关配置，如设备地址、共享密钥、创建用户等配置。假设已在RADIUS服务器上创建了用户名yc123，密码test#123。对...
- HTTPS是什么?加密原理和证书。SSL/TLS握手过程
-
秘钥的产生过程非对称加密...
- HTTPS TLS握手流程_进行tls握手
-
1.客户端向服务器发送`ClientHello`消息，包括支持的TLS版本、加密套件、随机数等信息。2.服务器收到`ClientHello`消息后，解析其中的信息，并根据配置选择一个加密套件。3....
- Spring Boot 单点登录(SSO)实现_spring boot 单点登录jwt
-
SpringBoot单点登录（SSO）实现全指南单点登录（SingleSign-On,SSO）是一种身份验证机制，允许用户使用一组凭证登录多个相关但独立的系统。在微服务架构和企业级系统中，SS...
- 源码分享:在pdf上加盖电子签章_pdf如何加盖电子公章
-
在pdf上加盖电子签章，并不是只是加个印章图片，。而是要使用一对密钥中的私钥对文件进行签字。为啥要用私钥呢？很简单，因为公钥是公开的，其他人才可以用公钥为你证明，这个文件是你签的。这就是我们常说的：私...
- 微信支付商户API证书到期 怎么更换
-
微信支付商户API证书到期更换是一个非常重要的操作，需要仔细按照流程进行。如果证书过期，所有通过API的支付、退款等操作都会失败，将直接影响您的业务。请按照以下详细步骤进行操作：重要前提：分清...