在Ionic应用中对裁剪后的图像使用OpenCV检测轮廓的方法

步骤1：安装OpenCV JS依赖 #

在项目根目录执行：

npm install @techstark/opencv-js

步骤2：配置OpenCV异步加载 #

在组件中导入并初始化OpenCV，确保加载完成后再处理图像：

import { Component, OnInit } from '@angular/core';
import * as cv from '@techstark/opencv-js';

@Component({
  selector: 'app-image-processor',
  templateUrl: './image-processor.component.html',
  styleUrls: ['./image-processor.component.scss'],
})
export class ImageProcessorComponent implements OnInit {
  isOpenCVLoaded = false;

  ngOnInit() {
    // 初始化OpenCV
    cv['onRuntimeInitialized'] = () => {
      this.isOpenCVLoaded = true;
      console.log('OpenCV 加载完成');
    };
  }
}

步骤3：处理裁剪后的图像并执行轮廓检测 #

假设你已经通过裁剪组件获取到ImageCroppedEvent，在裁剪完成的回调中处理：

// 裁剪完成的回调函数
onImageCropped(event: any) {
  if (!this.isOpenCVLoaded) {
    console.error('OpenCV 尚未加载完成');
    return;
  }

  // 创建Image对象加载裁剪后的图像
  const img = new Image();
  img.crossOrigin = 'anonymous';
  
  img.onload = () => {
    // 创建临时Canvas用于图像转换
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 将Canvas图像转换为OpenCV的Mat对象
    const src = cv.imread(canvas);
    const gray = new cv.Mat();
    const edges = new cv.Mat();
    const contours = new cv.MatVector();
    const hierarchy = new cv.Mat();

    try {
      // 1. 转换为灰度图
      cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
      // 2. 二值化（可根据图像调整阈值）
      cv.threshold(gray, edges, 127, 255, cv.THRESH_BINARY);
      // 3. 查找轮廓
      cv.findContours(edges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE);

      // 可选：在原图像上绘制红色轮廓
      const color = new cv.Scalar(0, 0, 255, 255);
      cv.drawContours(src, contours, -1, color, 2);

      // 将处理后的图像回显到页面Canvas（如果需要）
      cv.imshow('resultCanvas', src);
      
      // 输出轮廓数量
      console.log('检测到的轮廓数量:', contours.size());
    } catch (err) {
      console.error('OpenCV 处理出错:', err);
    } finally {
      // 释放Mat内存，避免泄漏
      src.delete();
      gray.delete();
      edges.delete();
      contours.delete();
      hierarchy.delete();
    }
  };

  // 加载裁剪后的图像（优先用base64更直接）
  img.src = event.base64 ? `data:image/png;base64,${event.base64}` : event.objectUrl;
}

步骤4：页面添加结果Canvas（可选） #

如果需要显示绘制了轮廓的图像，在组件HTML中添加：

<canvas id="resultCanvas"></canvas>

常见问题排查 #

• 必须等待OpenCV加载完成后再执行操作，通过isOpenCVLoaded状态判断。
• 图像加载是异步操作，所有处理逻辑必须放在img.onload回调内，避免图像未加载完成就处理。
• OpenCV的Mat对象使用后必须调用delete()释放内存，防止内存占用过高。
• 二值化的阈值（示例中为127）需要根据你的实际图像调整，确保轮廓能被正确识别。

内容的提问来源于stack exchange，提问作者Avinash sharma