基于canvas的图像无机物检测

最新推荐文章于 2024-05-07 10:26:10 发布

everccnight

最新推荐文章于 2024-05-07 10:26:10 发布

阅读量466

点赞数

分类专栏： canvas 文章标签： canvas javascript 图片识别

本文链接：https://blog.csdn.net/everccnight/article/details/72878026

版权

canvas 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

当我们把一张图片放到canvas 中如何检测这样安检图是不是有无机物那，其实canvas 做的也很强大可以通过算法来检测，现在我就来给大家讲解下。

ctx.drawImage(imgs, 0, 0,width,height);
pixels = ctx.getImageData(0,0,width,height);

首先先获取canvas的像素点，ctx 是canvas.getContext('2d')。

for (var i = 0, len = pixels.data.length; i < len; i += 4) { 
if ((pixels.data[i + 2] > pixels.data[i + 1]) && (pixels.data[i + 2] > pixels.data[i])) { continue; } 
    else { 
        var gray = parseInt(pixels.data[i] * 0.3 + pixels.data[i + 1] * 0.59 + pixels.data[i + 2] * 0.11); pixels.data[i] = gray; 
        pixels.data[i + 1] = gray; 
        pixels.data[i + 2] = gray; 
    } 
}

下面就是具体的算法了因为像素点4个为一组 rgba 所以去前三个点计算 rgb b>g &&b>r的像素点保留其他的像素点都通过灰度算法让他变灰。

下面来展示下效果图