Question

假设我有一张带有黑色填充矩形的扫描纸，我想要定位所有这些矩形，得到它们的坐标（X和Y）及其尺寸（宽度和高度）。

有没有准确的算法可以满足我的需求？我是Javascript和Canvas的像素处理新手，我需要一些帮助。提前谢谢！

Answer 1

识别所有黑色矩形的x，y，宽度和高度包括以下步骤：

使用context.getImageData获取画布上所有r，g，b，像素信息的数组。
扫描像素颜色以找到任何一个黑色像素。
找到包含该黑色像素的黑色矩形的边界框。
该边界框将为您提供一个黑色矩形的x，y，宽度和高度。
清除黑色矩形，以便在搜索下一个黑色矩形时找不到它。
重复步骤＃1，直到识别出所有矩形。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/3m0dL368/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
    #clips{border:1px solid blue; padding:5px;}
    img{margin:3px;}        
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw,ch;        

    // background definition
    // OPTION: look at the top-left pixel and assume == background
    //         then set these vars automatically
    var isTransparent=false;
    var bkColor={r:255,g:255,b:255};
    var bkFillColor="rgb("+bkColor.r+","+bkColor.g+","+bkColor.b+")";

    cw=canvas.width;
    ch=canvas.height;
    ctx.fillStyle="white";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    drawTestRect(30,30,50,50,"1");
    drawTestRect(100,30,50,50,"2");
    drawTestRect(170,30,50,50,"3");

    function drawTestRect(x,y,w,h,label){
        ctx.fillStyle="black";
        ctx.fillRect(x,y,w,h);
        ctx.fillStyle="white";
        ctx.font="24px verdana";
        ctx.fillText(label,x+10,y+25);        
    }

    function clipBox(data){
        var pos=findEdge(data);
        if(!pos.valid){return;}
        var bb=findBoundary(pos,data);
        alert("Found target at "+bb.x+"/"+bb.y+", size: "+bb.width+"/"+bb.height);            
        clipToImage(bb.x,bb.y,bb.width,bb.height);
        if(isTransparent){
            // clear the clipped area
            // plus a few pixels to clear any anti-aliasing
            ctx.clearRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
        }else{
            // fill the clipped area with the bkColor
            // plus a few pixels to clear any anti-aliasing
            ctx.fillStyle=bkFillColor;
            ctx.fillRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
        }
    }

    function xyIsInImage(data,x,y){
        // find the starting index of the r,g,b,a of pixel x,y
        var start=(y*cw+x)*4;
        if(isTransparent){
            return(data[start+3]>25);
        }else{
            var r=data[start+0];
            var g=data[start+1];
            var b=data[start+2];
            var a=data[start+3];  // pixel alpha (opacity)
            var deltaR=Math.abs(bkColor.r-r);
            var deltaG=Math.abs(bkColor.g-g);
            var deltaB=Math.abs(bkColor.b-b);
            return(!(deltaR<5 && deltaG<5 && deltaB<5 && a>25));
        }
    }

    function findEdge(data){
        for(var y=0;y<ch;y++){
        for(var x=0;x<cw;x++){
            if(xyIsInImage(data,x,y)){
                return({x:x,y:y,valid:true});
            }
        }}
        return({x:-100,y:-100,valid:false});
    }

    function findBoundary(pos,data){
        var x0=x1=pos.x;
        var y0=y1=pos.y;
        while(y1<=ch && xyIsInImage(data,x1,y1)){y1++;}
        var x2=x1;
        var y2=y1-1;
        while(x2<=cw && xyIsInImage(data,x2,y2)){x2++;}
        return({x:x0,y:y0,width:x2-x0,height:y2-y0+1});
    }

    function drawLine(x1,y1,x2,y2){
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.strokeStyle="red";
        ctx.lineWidth=0.50;
        ctx.stroke();
    }

    function clipToImage(x,y,w,h){
        // don't save anti-alias slivers
        if(w<3 || h<3){ return; }
        // save clipped area to an img element
        var tempCanvas=document.createElement("canvas");
        var tempCtx=tempCanvas.getContext("2d");
        tempCanvas.width=w;
        tempCanvas.height=h;
        tempCtx.drawImage(canvas,x,y,w,h,0,0,w,h);
        var image=new Image();
        image.width=w;
        image.height=h;
        image.src=tempCanvas.toDataURL();
        $("#clips").append(image);
    }

    $("#unbox").click(function(){
        var imgData=ctx.getImageData(0,0,cw,ch);
        var data=imgData.data;
        clipBox(data);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="unbox">Clip next sub-image</button><br>
    <canvas id="canvas" width=300 height=150></canvas><br>
    <h4>Below are images clipped from the canvas above.</h4><br>
    <div id="clips"></div>
</body>
</html>

找到画布中的所有黑色矩形

1 个答案: