时间戳

首页 > 解决方案 > 循环时增加 JS Array 项

javascript - 循环时增加 JS Array 项

问题描述

我正在研究由黑白方块组成的图形代码（如简化的二维码）。在 HTML 画布中，我能够检测到每个正方形位置和像素。问题是计算每个正方形区域中存在多少黑色像素。

假设我的代码是 5x3 方格。我为每一行创建一个数组：row_1 = [0,0,0,0,0];

像素是黑色还是白色？

for (let i = 0, j = pix.length; i < j; i += 4) {
    if(pix[i+0] + pix[i+1] + pix[i+2] < 30) { /* add 1 to array */ }
}

一旦方块完全扫描，阵列应该看起来像row_1 = [20,1580,0,1250,40];说第 1、第 3 和第 5 个方块是白色的，第 2、第 4 个方块是黑色的。

最终值应为 0（白色）和 1600（40x40），但手机摄像头捕获的代码可能不完全是水平/垂直的。

我尝试了不同的解决方案，但没有一个有效：

// first square is [0]
if(pix[i+0] + pix[i+1] + pix[i+2] < 30) { row_1[0] +=1 }
if(pix[i+0] + pix[i+1] + pix[i+2] < 30) { row_1[0] = row_1[0]+1 }
if(pix[i+0] + pix[i+1] + pix[i+2] < 30) { row_1[0].splice(0, 1, row_1[0]+1) }

如何做到这一点？提前致谢。

**** 编辑

我的第一个想法（运作良好）是let row_1_1 = 0为每个黑色像素定义一个 var 而不是数组：if(...black pix...){ row_1_1 +=1 } 它工作得很好，但是 1）我必须手动创建很多 var 和 2）使用数组我可以循环整个函数。使用 var 意味着使用自己的 var 分别探索每个方格。使用数组意味着只需一行代码就可以探索所有行方格。

标签： javascriptarrayscanvas

解决方案

有用。

 let row_1 = [ 0,0,0,0,0 ];

 let imgctx = ctx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height);
 let pix = imgctx.data;

 for (let i = 0, j = pix.length; i < j; i += 4) {
    if( ... condition to detect the 1st row in canvas... ) {
        for (let c = 0, l = 5; c < l; c ++) { // loop for 5 squares
            if( ...condition for each square: left and width... ) { 
                if(pix[i+0] + pix[i+1] + pix[i+2] < 30) { row_1[c] +=1; }
            }
        }
    }
 }
 alert("1st row = "+row_1) // -> [0,1552,53,1492,112]

然后循环数组并Math.round((1552/1600)*100)给出每个正方形中黑色像素的百分比 = 97%。正方形是黑色的。

推荐阅读