服务端阅读 05月29日 01:21
OpenCV.js 在实际项目中有哪些应用场景？
OpenCV.js 在实际开发中有很多应用场景，以下是几个典型的实战案例：1. 网页端图像编辑器功能实现class ImageEditor { constructor(canvasId) { this.canvas = document.getElementById(canvasId); this.ctx = this.canvas.getContext('2d'); this.originalImage = null; this.currentImage = null; } loadImage(file) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { this.canvas.width = img.width; this.canvas.height = img.height; this.ctx.drawImage(img, 0, 0); this.originalImage = cv.imread(this.canvas); this.currentImage = this.originalImage.clone(); resolve(); }; img.onerror = reject; img.src = URL.createObjectURL(file); }); } applyFilter(filterType) { let temp = new cv.Mat(); try { switch(filterType) { case 'grayscale': cv.cvtColor(this.currentImage, temp, cv.COLOR_RGBA2GRAY); cv.cvtColor(temp, this.currentImage, cv.COLOR_GRAY2RGBA); break; case 'blur': cv.GaussianBlur(this.currentImage, temp, new cv.Size(15, 15), 0); temp.copyTo(this.currentImage); break; case 'sharpen': let kernel = cv.matFromArray(3, 3, cv.CV_32FC1, [ 0, -1, 0, -1, 5, -1, 0, -1, 0 ]); cv.filter2D(this.currentImage, temp, -1, kernel); temp.copyTo(this.currentImage); kernel.delete(); break; case 'edge': cv.cvtColor(this.currentImage, temp, cv.COLOR_RGBA2GRAY); cv.Canny(temp, temp, 50, 100); cv.cvtColor(temp, this.currentImage, cv.COLOR_GRAY2RGBA); break; } cv.imshow(this.canvas.id, this.currentImage); } finally { temp.delete(); } } adjustBrightness(value) { let temp = new cv.Mat(); try { this.currentImage.convertTo(temp, -1, 1, value); temp.copyTo(this.currentImage); cv.imshow(this.canvas.id, this.currentImage); } finally { temp.delete(); } } reset() { this.currentImage = this.originalImage.clone(); cv.imshow(this.canvas.id, this.currentImage); } download() { const link = document.createElement('a'); link.download = 'edited-image.png'; link.href = this.canvas.toDataURL(); link.click(); }}2. 实时人脸检测和识别class FaceDetector { constructor(videoId, canvasId) { this.video = document.getElementById(videoId); this.canvas = document.getElementById(canvasId); this.faceCascade = new cv.CascadeClassifier(); this.isRunning = false; } async init() { // 加载人脸检测模型 await this.loadModel('haarcascade_frontalface_default.xml'); // 启动摄像头 const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } }); this.video.srcObject = stream; await this.video.play(); this.canvas.width = this.video.videoWidth; this.canvas.height = this.video.videoHeight; } async loadModel(url) { return new Promise((resolve, reject) => { this.faceCascade.load(url); resolve(); }); } start() { this.isRunning = true; this.detect(); } stop() { this.isRunning = false; } detect() { if (!this.isRunning) return; let src = new cv.Mat(); let gray = new cv.Mat(); let faces = new cv.RectVector(); try { // 读取视频帧 src = cv.imread(this.video); // 转灰度 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 检测人脸 this.faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0); // 绘制人脸框 for (let i = 0; i < faces.size(); ++i) { let face = faces.get(i); let point1 = new cv.Point(face.x, face.y); let point2 = new cv.Point(face.x + face.width, face.y + face.height); cv.rectangle(src, point1, point2, [255, 0, 0, 255], 2); // 添加标签 cv.putText(src, `Face ${i + 1}`, new cv.Point(face.x, face.y - 10), cv.FONT_HERSHEY_SIMPLEX, 0.5, [0, 255, 0, 255], 1); } cv.imshow(this.canvas.id, src); requestAnimationFrame(() => this.detect()); } finally { src.delete(); gray.delete(); faces.delete(); } }}3. OCR 文字识别class OCRProcessor { constructor() { this.tesseract = null; } async init() { // 初始化 Tesseract.js this.tesseract = Tesseract.createWorker({ logger: m => console.log(m) }); await this.tesseract.loadLanguage('eng'); await this.tesseract.initialize('eng'); } async preprocessImage(imageElement) { let src = cv.imread(imageElement); let gray = new cv.Mat(); let binary = new cv.Mat(); let denoised = new cv.Mat(); try { // 转灰度 cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); // 降噪 cv.medianBlur(gray, denoised, 3); // 二值化 cv.threshold(denoised, binary, 0, 255, cv.THRESH_BINARY + cv.THRESH_OTSU); // 显示预处理结果 const canvas = document.getElementById('preprocessedCanvas'); cv.imshow(canvas.id, binary); return binary; } finally { src.delete(); gray.delete(); denoised.delete(); } } async recognizeText(imageElement) { // 预处理图像 const processed = await this.preprocessImage(imageElement); // 转换为 ImageData const canvas = document.getElementById('preprocessedCanvas'); const imageData = canvas.toDataURL('image/png'); // OCR 识别 const { data: { text } } = await this.tesseract.recognize(imageData); processed.delete(); return text; } async cleanup() { await this.tesseract.terminate(); }}4. 实时二维码扫描class QRScanner { constructor(videoId, canvasId) { this.video = document.getElementById(videoId); this.canvas = document.getElementById(canvasId); this.isScanning = false; } async start() { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }); this.video.srcObject = stream; await this.video.play(); this.canvas.width = this.video.videoWidth; this.canvas.height = this.video.videoHeight; this.isScanning = true; this.scan(); } scan() { if (!this.isScanning) return; let src = new cv.Mat(); let gray = new cv.Mat(); let edges = new cv.Mat(); try { src = cv.imread(this.video); cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); cv.Canny(gray, edges, 50, 150); // 查找轮廓 let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(edges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE); // 检测二维码 for (let i = 0; i < contours.size(); i++) { let contour = contours.get(i); let area = cv.contourArea(contour); if (area > 1000) { // 绘制轮廓 cv.drawContours(src, contours, i, [0, 255, 0, 255], 2); // 提取二维码区域 let rect = cv.boundingRect(contour); let qrCode = src.roi(rect); // 使用 jsQR 库解码 const imageData = new ImageData( new Uint8ClampedArray(qrCode.data), qrCode.cols, qrCode.rows ); const code = jsQR(imageData.data, imageData.width, imageData.height); if (code) { console.log('QR Code:', code.data); // 触发回调 this.onQRCodeDetected(code.data); } qrCode.delete(); } } cv.imshow(this.canvas.id, src); requestAnimationFrame(() => this.scan()); } finally { src.delete(); gray.delete(); edges.delete(); } } stop() { this.isScanning = false; } onQRCodeDetected(data) { // 重写此方法处理二维码数据 console.log('QR Code detected:', data); }}5. 实时视频滤镜class VideoFilter { constructor(videoId, canvasId) { this.video = document.getElementById(videoId); this.canvas = document.getElementById(canvasId); this.currentFilter = 'none'; } async start() { const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } }); this.video.srcObject = stream; await this.video.play(); this.canvas.width = this.video.videoWidth; this.canvas.height = this.video.videoHeight; this.process(); } setFilter(filterName) { this.currentFilter = filterName; } process() { let src = new cv.Mat(); let dst = new cv.Mat(); try { src = cv.imread(this.video); switch(this.currentFilter) { case 'grayscale': cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY); cv.cvtColor(dst, dst, cv.COLOR_GRAY2RGBA); break; case 'sepia': this.applySepia(src, dst); break; case 'cartoon': this.applyCartoon(src, dst); break; case 'emboss': this.applyEmboss(src, dst); break; default: src.copyTo(dst); } cv.imshow(this.canvas.id, dst); requestAnimationFrame(() => this.process()); } finally { src.delete(); dst.delete(); } } applySepia(src, dst) { let kernel = cv.matFromArray(3, 3, cv.CV_32FC1, [ 0.272, 0.534, 0.131, 0.349, 0.686, 0.168, 0.393, 0.769, 0.189 ]); cv.transform(src, dst, kernel); kernel.delete(); } applyCartoon(src, dst) { let gray = new cv.Mat(); let edges = new cv.Mat(); let color = new cv.Mat(); cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); cv.medianBlur(gray, gray, 7); cv.Canny(gray, edges, 50, 150); cv.cvtColor(edges, edges, cv.COLOR_GRAY2RGBA); cv.bilateralFilter(src, color, 9, 250, 250); cv.bitwise_and(color, edges, dst); gray.delete(); edges.delete(); color.delete(); } applyEmboss(src, dst) { let kernel = cv.matFromArray(3, 3, cv.CV_32FC1, [ -2, -1, 0, -1, 1, 1, 0, 1, 2 ]); cv.filter2D(src, dst, -1, kernel); kernel.delete(); }}这些实战案例展示了 OpenCV.js 在不同场景下的应用，开发者可以根据具体需求选择合适的实现方案。
