这是我的问题:如何匹配 HTML5 Canvas 中的水平线。
为了进一步解释我想要做什么，我在 Canvas 中加载了一张图片 (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]
最佳答案
如何在 Canvas 上找到最大的连续水平线
方法是:
- 获取像素数据数组
- 一次移动一行像素
- 计算一行中最长的连续水平线
- 如果该计算出的线比 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;
}
}
}
这是代码和 fiddle :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>
关于javascript - 如何匹配 HTML5 Canvas 中的水平线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17766115/