1

これが私の質問です: 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]

4

1 に答える 1

2

キャンバス上の最大連続水平線を見つける方法

ここに画像の説明を入力

メソッドは次のとおりです。

  • ピクセル データ配列を取得する
  • 一度に 1 行ずつピクセルを移動する
  • 行の最長連続水平線を計算する
  • その計算された線が 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 に答える