canvas遍历像素

/ 0评 / 0

遍历像素

最近,碰到个RGBA计算公式不知道咋推出的,后面自己琢磨了一下,明白地差不多了,故记录一下。

canvas中遍历像素有两种算法:1.逐像素遍历 2.行列遍历

逐像素遍历

首先,一个像素格的rgba值是4个数字,所以关键点就是:每隔4个数据遍历一次

for(let i = 0; i < arr.length; i += 4) {
   let r = data[i + 0];
   let g = data[i + 1];
   let b = data[i + 2];
   let a = data[i + 3];
   console.log(r,g,b,a);
}

行列遍历

这个算法基于行列遍历,可获取像素点的位置信息(哪一行哪一列)

先上代码
for(let y = 0; y < h; y++) {
  for(let x = 0; x < w; x++) {
     let index = (y * w + x) * 4; -> 疑惑点
     let r = data[index];
     let g = data[index + 1];
     let b = data[index + 2];
     let a = data[index + 3];
     console.log(r,g,b,a);
  }
}
-------------------------------------------------------
此算法多用于实现马赛克效果
上方的图像,根据算法,需要将它向左倒过来看,也就是说y表示行,x表示在哪一列
w,h -> 表示当前像素块的宽和高

// y表示在哪一行
for(let y = 0; y < h; y++) {
  // x表示在哪一列
  for(let x = 0; x < w; x++) {

     // 这公式计算的是r的索引,我们根据r的索引就能很轻松地推出其余数据
     // 我的理解是:行乘以像素块的宽度 = 当前像素块在哪一列,再加上列,以此来确定像素块处于哪一行哪一列
     // 乘以4是因为有r,g,b,a四个值
     let index = (y * w + x) * 4;
     let r = data[index];
     let g = data[index + 1];
     let b = data[index + 2];
     let a = data[index + 3];
     console.log(r,g,b,a);
  }
}

发表评论

渝公网安备 50010102001052号

/

渝ICP备2021009595号