zhangjian4 / uniapp-opencv

uniapp-opencv

介绍

基于opencv-ts对uni-app做了适配,目前支持H5、微信小程序、App,其中微信小程序适配参考了WeChat-MiniProgram-AR-WASM。

使用方法

import cv from '@/uni_modules/zj-opencv';

cv.then(async () => {
    const src = await cv.imread('first');
    const dst = new cv.Mat();
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
    await cv.imshow('second', dst);
    src.delete();
    dst.delete();
});

具体可参考Demo

注意事项

• 由于uniapp中部分方法需要异步调用,原imread和imshow方法改为了异步方法,返回的是Promise对象,调用时需要在前面加await或在then里面执行后续操作。
• imread和imshow方法暂时只支持传入canvas的id,注意不是canvas-id。
• Mat对象用完一定要调用delete方法,否则会造成OOM。
• 微信小程序中如果使用的不是2d的canvas,调试工具不支持canvasPutImageData,需要在真机中预览。
• 在Typescript中使用时,如果引入的路径为绝对路径如@/uni_modules/zj-opencv,需要修改tsconfig.json文件。

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  ...
}

• 字节小程序在调试工具上运行会报错，需要在真机上预览
• 字节小程序不支持压缩过的wasm文件，由于上传的大小限制所以只编译了图像处理的模块

其他

opencv.js修改明细