如何修复调用cv.threshold时OpenCV.js抛出随机数字的问题

云原生阿岚

2026-7-18

问题根源：OTSU阈值化仅支持单通道灰度图

你看到的随机数字（如6620912）是OpenCV.js底层的错误标识，本质原因是直接对RGB三通道图像调用了cv.THRESH_OTSU——OTSU阈值化算法只能处理单通道灰度图，三通道图像会触发内存层面的错误，表现为这类无明确提示的随机数字。

解决方案：先将图像转为灰度图

在调用cv.threshold前，添加图像通道转换步骤，把RGBA格式的图像转为单通道灰度图：

修改后的核心代码

useEffect(() => {
    if (!OriginalImage) return

    const asyncWrapper = async () => {
        if (!PreviewCanvasRef.current) return

        const image = await new Promise<HTMLImageElement>(resolve => {
            const img = new Image()
            img.onload = () => resolve(img)
            img.src = OriginalImage
        })

        const canvas = Canvas(image.width, image.height)
        const ctx = canvas.getContext('2d')
        ctx?.drawImage(image, 0, 0)

        const rawImage = cv.imread(canvas)
        const grayImage = new cv.Mat()
        // 将RGBA格式转为单通道灰度图
        cv.cvtColor(rawImage, grayImage, cv.COLOR_RGBA2GRAY)
        
        const tresholdImage = new cv.Mat()
        // 对灰度图应用OTSU阈值化
        cv.threshold(grayImage, tresholdImage, 0, 255, cv.THRESH_OTSU)

        cv.imshow(PreviewCanvasRef.current, tresholdImage)

        // 释放所有Mat内存，避免内存泄漏
        rawImage.delete()
        grayImage.delete()
        tresholdImage.delete()
    }

    asyncWrapper().catch(console.error)
}, [OriginalImage])