如何匹配HTML5画布中的水平线?

时间:2013-07-20 19:54:40

标签: javascript math canvas html5-canvas

以下是我的问题:如何匹配HTML5 canavas中的水平线

为了解释一下我想要做的事情,我有一张图片(jpg),我在画布中加载。 我获取图像数据并解析每个像素以进行分析。

最后,我想找到最长的水平线并能够在我的图片上画一条 验证匹配是否正常< /强>

我不想使用外部库。如果您对该主题的文章有任何提及,那就太棒了!

var Ll = 0; // max horizontal line's length
var Ly=0; // max line's x coordonate
var Lx=0; // max line's y coordonate
for (var i=0;i<imgData.data.length;i+=(4*canvas.width)){

    for (var j=i;j<(4*canvas.width);j+=4){
      o = imgData.data[j+3];
      if(o==255){ black = true }else{ black = false }
      k=i;
      while(black){
        o = imgData.data[k+3];
        if(o==255 & k<(4*canvas.width)){ black = true }else{ black = false }
        k+=4;
      }
      tmpLength = (k-j)/4;
      if(tmpLength > Ll){
        Ll = tmpLength;
        Ly = i/4;
        Lx = (j-i);
        console.log([Ll, Ly, Lx]);
      }
    }
}

我的图片只是黑色和透明。这就是我只使用imgData.data[j+3]

的原因

1 个答案:

答案 0 :(得分:2)

如何在画布上找到最大连续水平线

enter image description here

方法是:

  • 获取像素数据数组
  • 一次一行地移动像素
  • 计算行上最长的连续水平线
  • 如果该计算的行长于maxLine,请将该行设为maxLine
  • 完成所有行后,您将获得最长的连续水平线。

这是扫描每一行并计算maxLine

的代码
    // set up variables to hold the results
    var maxLength=0;
    var maxY;
    var maxStartX;
    var maxEndX;

    // step through each horizontal line
    for(var y = 0; y < canvas.height; y++) {

        var continuous=0;

        for(var x = 0; x < canvas.width; x++) {

            if(data[((canvas.width * y) + x) * 4 + 3]>0){

                // calculate this line's maximum continuouse line
                continuous++;

            }else{

                // if this line's line is longer than maxLength 
                if(continuous>maxLength){
                    // replace maxLength with this line's data
                    maxLength=continuous;
                    maxY=y+1;
                    maxEndX=x-1;
                    maxStartX=maxEndX-continuous+1;
                }

                continuous=0;
            }
        }
    }

这是代码和小提琴:http://jsfiddle.net/m1erickson/nvd49/

<!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; padding:20px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,220);
    ctx.lineTo(80,220);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(65,125);
    ctx.lineTo(100,150);
    ctx.lineTo(135,125);
    ctx.closePath();
    ctx.fill();

    ctx.fillRect(175,0,30,canvas.height);

    // get the pixel-data array
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data;

    // set up variables to hold the results
    var maxLength=0;
    var maxY;
    var maxStartX;
    var maxEndX;

    // step through each horizontal line
    for(var y = 0; y < canvas.height; y++) {

        var continuous=0;

        for(var x = 0; x < canvas.width; x++) {

            if(data[((canvas.width * y) + x) * 4 + 3]>0){

                // calculate this line's maximum continuouse line
                continuous++;

            }else{

                // if this line's line is longer than maxLength 
                if(continuous>maxLength){
                    // replace maxLength with this line's data
                    maxLength=continuous;
                    maxY=y+1;
                    maxEndX=x-1;
                    maxStartX=maxEndX-continuous+1;
                }

                continuous=0;

            }

        }
    }

    ctx.beginPath();
    ctx.moveTo(maxStartX,maxY);
    ctx.lineTo(maxEndX,maxY);
    ctx.strokeStyle="orange";
    ctx.lineWidth=1;
    ctx.stroke();

    $("#results").text(maxLength+"px long from ["+maxStartX+"/"+maxY+"] to ["+maxEndX+"/"+maxY+"]");


}); // end $(function(){});
</script>

</head>

<body>
    <p>The longest continuous horizontal line:</p>
    <p>(Highlighted by the orange line)</p>
    <p id="results"></p>
    <canvas id="canvas" width=300 height=250></canvas>
</body>
</html>