### 集成 OpenCV.js 到微信小程序 #### 下载和准备 OpenCV.js 文件 要将 OpenCV.js 应用到微信小程序中，首先需要获取最新版本的 `opencv.js` 文件。可以从官方 GitHub 仓库下载预编译好的 JavaScript 版本。 ```bash wget https://docs.opencv.org/master/opencv.js ``` 此命令会下载最新的稳定版 OpenCV.js 文件[^1]。 #### 小程序项目配置调整 在微信开发者工具中创建新项目之后，在项目的根目录下建立一个新的文件夹来存储第三方库资源，比如命名为 `libs` 或者 `vendor`。把之前下载得到的 `opencv.js` 放入其中，并确保路径正确无误[^4]。 #### 修改 app.json 添加全局脚本引入 为了让整个应用程序都可以访问 OpenCV 的功能，可以在 `app.json` 中加入 globalUsing 字段： ```json { "globalUsing": ["./libs/opencv"] } ``` 这样做的好处是可以让所有页面都能加载这个外部 JS 脚本而不需要重复声明。 #### 页面内使用 OpenCV.js 处理图片 假设有一个简单的图像处理需求——检测并标记出照片里的人脸位置。下面是一个简化后的例子展示如何利用 OpenCV.js 实现这一目标: ```html <!-- index.wxml --> <view class="container"> <canvas type="2d" id="myCanvas"></canvas> </view> <script src="./libs/opencv.js"></script> <script> Page({ data: { imgSrc: '/images/test.jpg' }, onLoad:function(){ const ctx = wx.createCanvasContext('myCanvas'); // 加载本地测试图片作为 canvas background image ctx.drawImage(this.data.imgSrc,0,0); ctx.draw(); setTimeout(() => { cv['onRuntimeInitialized'] = () => { let srcBase64 = this.getImageData(); // Convert base64 string to Mat object var mat = cv.imread(srcBase64); // Perform face detection using Haar cascades classifier (pre-trained model included with OpenCV) var grayMat = new cv.Mat(); cv.cvtColor(mat, grayMat, cv.COLOR_RGBA2GRAY); var faces = []; var faceCascade = new cv.CascadeClassifier(); faceCascade.load(cv.FACE_PREBUILT_CASCADE_FILE); faceCascade.detectMultiScale(grayMat,faces,1.1,3,new cv.Size(30,30)); // Draw rectangles around detected faces on original colored image for(let i=0;i<faces.length;++i){ let pt1 = new cv.Point(faces[i].x, faces[i].y); let pt2 = new cv.Point(faces[i].x + faces[i].width, faces[i].y + faces[i].height); cv.rectangle(mat,pt1,pt2,cv.Scalar.all(255)); } // Display processed result back onto the page via Canvas API again. let dstBase64 = cv.imencode('.png',mat).toString('base64'); ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); ctx.drawImage(`data:image/png;base64,${dstBase64}`,0,0); ctx.draw(); }; }, 1000); }, getImageData(){ /* ... */ } // Implement function that converts canvas content into Base64 format }); </script> ``` 这段代码展示了怎样在一个 WXML 页面里面嵌入 `<canvas>` 元素用于绘图操作；同时通过 JavaScript 获取画布上的图像数据转为适合 OpenCV.js 操作的形式，接着调用 OpenCV 提供的方法做面部特征提取最后再渲染回前端界面上去[^3].