使用OpenCV.js可在前端直接实现图像识别，无需后端支持。它基于WebAssembly，提供人脸检测、边缘识别等核心算法，通过CDN引入后可结合canvas进行实时处理，适合轻量级视觉任务。
JavaScript 结合 OpenCV.js 实现图像识别，让前端也能处理视觉任务。不需要后端支持，直接在浏览器里运行，适合轻量级应用比如人脸检测、边缘识别、物体轮廓提取等。
为什么用 OpenCV.js 做图像识别？
OpenCV 是最流行的计算机视觉库，原本基于 C++ 开发，但官方提供了 OpenCV.js——编译成 WebAssembly 的 JavaScript 版本。它可以直接在网页中调用核心算法，比如：
- 图像灰度化、二值化
- 边缘检测（Canny）
- 模板匹配
- 人脸检测（基于 Haar 分类器）
- 特征点提取（SIFT/SURF 模拟）
优势在于：纯前端运行、响应快、可集成到 React/Vue 项目中，适合做实时摄像头分析或上传图片的智能识别。
如何引入并初始化 OpenCV.js
从官网或 CDN 引入 opencv.js 文件，注意它体积较大（约 5-7MB），建议异步加载。
立即学习“Java免费学习笔记（深入）”；
示例代码：确保页面有 canvas 或 video 标签用于图像输入输出。
实现一个简单的边缘检测功能
用户上传一张图片，用 Canny 算法检测边缘。
老式古典悬挂时钟矢量素材适用于室内装饰设计、复古风格品牌标识、历史主题展览的视觉元素、古典风格网站和移动应用界面、印刷品如书籍封面、杂志和宣传册、包装设计特别是奢侈品或高端产品的包装、时尚和服装行业的图案设计、教育和文化机构的宣传材料、古董或收藏品等相关设计的AI格式素材。
- 获取 img 元素和 canvas 上下文
- 将图像转为 OpenCV 的 Mat 对象
- 灰度化 + 高斯模糊降噪
- 执行 Canny 边缘检测
- 把结果渲染回 canvas
function detectEdges() {
let src = cv.imread('inputImage'); // inputImage 是 img 的 id
let gray = new cv.Mat();
let edges = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
cv.GaussianBlur(gray, gray, {width:5, height:5}, 0, 0);
cv.Canny(gray, edges, 50, 150);
cv.imshow('canvasOutput', edges); // canvasOutput 是 canvas 的 id
src.delete();
gray.delete();
edges.delete();
}
点击按钮即可看到边缘轮廓图。
做人脸检测的小应用
使用预训练的 Haar 分类器文件（如 haarcascade_frontalface_default.xml）。
- 先通过 XMLHttpRequest 加载模型文件
- 创建 CascadeClassifier 对象
- 读取图像并检测多个人脸区域
- 在原图上画出矩形框
注意：XML 模型文件需放在服务器路径下，并允许跨域访问。
关键代码：let classifier = new cv.CascadeClassifier();
classifier.load('haarcascade_frontalface_default.xml');
function detectFaces() {
let src = cv.imread('inputImg');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
let faces = new cv.RectVector();
classifier.detectMultiScale(gray, faces, 1.1, 3, 0);
for (let i = 0; i < faces.size(); ++i) {
let face = faces.get(i);
cv.rectangle(src, {x: face.x, y: face.y},
{x: face.x + face.width, y: face.y + face.height},
[255, 0, 0, 255], 2);
}
cv.imshow('outputCanvas', src);
}
基本上就这些。OpenCV.js 功能强大但性能受限于浏览器，不适合复杂模型推理。但对于简单图像识别任务，它是快速上线的好选择。
