js opencv

// 使用 OpenCV.js 进行图像处理的示例代码

// 确保 OpenCV.js 已加载完成
function onOpenCvReady() {
    console.log('OpenCV.js is ready');

    // 创建一个 canvas 元素用于显示图像
    const canvas = document.createElement('canvas');
    canvas.width = 640;
    canvas.height = 480;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');

    // 加载一张图片
    const img = new Image();
    img.src = 'path_to_your_image.jpg';  // 替换为你的图片路径
    img.onload = () => {
        // 将图片绘制到 canvas 上
        ctx.drawImage(img, 0, 0);

        // 将 canvas 内容转换为 OpenCV 的 Mat 对象
        const mat = cv.imread(canvas);

        // 转换为灰度图像
        const grayMat = new cv.Mat();
        cv.cvtColor(mat, grayMat, cv.COLOR_RGBA2GRAY);

        // 应用高斯模糊
        const blurredMat = new cv.Mat();
        cv.GaussianBlur(grayMat, blurredMat, new cv.Size(7, 7), 0);

        // 边缘检测 (Canny)
        const edgesMat = new cv.Mat();
        cv.Canny(blurredMat, edgesMat, 50, 150);

        // 将结果绘制回 canvas
        cv.imshow(canvas, edgesMat);

        // 释放内存
        mat.delete();
        grayMat.delete();
        blurredMat.delete();
        edgesMat.delete();
    };
}

// 检查 OpenCV.js 是否已加载
if (typeof cv !== 'undefined') {
    onOpenCvReady();
} else {
    document.addEventListener('load', onOpenCvReady);
}

解释说明：

1. 加载 OpenCV.js：确保 OpenCV.js 已经加载完毕，使用 onOpenCvReady 函数来处理后续逻辑。
2. 创建 Canvas：创建一个 HTML5 <canvas> 元素用于显示图像。
3. 加载图片：通过 <img> 标签加载一张图片，并在图片加载完成后进行处理。
4. 图像处理：
   • 将图片绘制到 canvas 上。
   • 使用 cv.imread 将 canvas 内容转换为 OpenCV 的 Mat 对象。
   • 将图像转换为灰度图像。
   • 应用高斯模糊以减少噪声。
   • 使用 Canny 算法进行边缘检测。
5. 显示结果：将处理后的图像重新绘制到 canvas 上。
6. 释放资源：释放不再使用的 Mat 对象以避免内存泄漏。

请根据实际情况替换 path_to_your_image.jpg 为你自己的图片路径。