Question

以下是我的问题：如何匹配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]
的原因

Answer 1

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

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>

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

1 个答案: