Question

老实说，我真的不知道在哪里真正寻找这个。我看了SO，但问题远比检测汽车或复杂的游戏形状要复杂得多。我只有一个画布（HTML5元素），其中有一个图像，里面有一堆矩形和正方形，里面有图像，想要检测每一个，“剪掉它们”，然后逐个浏览它们。我坚持的部分是找到形状，然后得到它们的坐标。这些不是我正在绘制的图像，而是其他图像正在上传，然后我画到画布上。

想想：

+------------------+
|  ----  ---  ---- |
|  |  |  | |  |  | |
|  ----  ---  ---- |
|  --------------- |
|  |             | |
|  --------------- |
|                  |
+------------------+

我想删除这四个块中的每一个，所以我可以逐个浏览它们，如：

----     ---     ----     ---------------
|  | =>  | | =>  |  | =>  |             |
----     ---     ----     ---------------

Answer 1

[如何对矩形进行自动裁剪的概述]

首先，将画布调整为图像大小，然后在画布上绘制图像。

然后对于画布图像中的每个矩形：

使用getImageData获取画布图像上每个像素颜色的数组。
从左上角开始扫描颜色。
当您点击非背景颜色时，您会碰到一个矩形边。
（您必须输入背景颜色或假设左上角像素定义背景颜色）
沿顺时针方向走长方形直到你回到起点。
（“步行”表示按照边框像素颜色垂直/水平移动。）
你有矩形的边界区域。
（由于抗锯齿像素，您需要绑定稍大的区域）。
创建临时画布并将其调整为发现的边界框大小。
使用context.drawImage的剪辑参数将有界rect从原始画布复制到临时画布。
使用canvas.toDataURL将临时画布保存为图像。
使用context.clearRect清除画布上的矩形像素。
再次开始流程以找到下一个矩形。

以下代码和演示文稿自动剪裁到图片： http://jsfiddle.net/m1erickson/33tf2/

enter image description here

<!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+")";

    // load test image
    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp2a.png";        

    function start(){
        // draw the test image on the canvas
        cw=canvas.width=img.width/2;
        ch=canvas.height=img.width/2;
        ctx.drawImage(img,0,0,cw,ch);
    }


    function clipBox(data){
        var pos=findEdge(data);
        if(!pos.valid){return;}
        var bb=findBoundary(pos,data);
        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>

Answer 2

如果在画布中只有带边框的矩形，则循环画布像素并检查相同颜色的序列（找到框的角）。 HTML5 canvas data

Answer 3

将每个绘制形状的细节记录到一个数组中。在某些时候，你或其他人必须告诉画布插入这些矩形和正方形，所以你肯定应该记录这些细节：

var shapes = []

// Then in some sort of listener
shapes.push({x:shapesX,y:shapesY,w:shapesW,h:shapesH})

通过聆听鼠标与画布的交互来获取这些形状细节（如果这是绘制到画布的方式）：

mousedown - 记录初始X / Y
mouseup - 记录用户指针从初始X / Y行进的距离以获得宽度和高度

在画布中查找正方形/矩形

3 个答案: