1

这是我的问题：如何匹配 HTML5 画布中的水平线。

为了进一步解释我想做的事情，我有一张图片（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]

4

1 回答 1

2

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

在此处输入图像描述

方法是：

  • 获取像素数据数组
  • 一次在像素中移动一行
  • 计算一行上最长的连续水平线
  • 如果该计算线比 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>
于 2013-07-21T00:42:55.613 回答