Я не использую цикл правильно при использовании putImageData

Question

Я читаю значения rgb из файла и пытаюсь поместить их на холст.

Я пробовал много разных вариаций циклов и значений приращений.

JavaScript:

function parseData(data) {
   var pixel_array = data.split('|');
   // Loop through pixel data from file
   for (i = 0; i < pixel_array.length; i += 4) {
         var [r, g, b] = pixel_array[i].split(',');
         imgData.data[i + 0] = r;
         imgData.data[i + 1] = g;
         imgData.data[i + 2] = b;
         imgData.data[i + 3] = 255;
   }
   ctx.putImageData(imgData, 0, 0);
};

Пример формата данных:

var data='84,133,165|84,133,165|85,133,165|86,135,167|87,136,168|88,137,169|89,138|'

Я получаю значения rgb на холст, но это 1/4 размера, который я бы предпочел. Я хотел бы получить точную копию значений RGB в моей переменной.

Answer 1

Поскольку pixel_array.length - это количество пикселей в ваших данных, вам нужно перебирать их только по одному.

Но поскольку ImageData.data использует 4 слота для представления одного пикселя, вам нужно умножить на 4 вашу переменную i.

var data='84,133,165|84,133,165|85,133,165|86,135,167|87,136,168|88,137,169|89,138|';
var pixel_array = data.split('|');
console.log(pixel_array.length); // 8

var imgData = new ImageData(4, 2);
console.log(imgData.data.length); // 32

// Loop through pixel data from file
for (let i = 0; i < pixel_array.length; i++) {
  const [r, g, b] = pixel_array[i].split(',');
  imgData.data[(i * 4) + 0] = r;
  imgData.data[(i * 4) + 1] = g;
  imgData.data[(i * 4) + 2] = b;
  imgData.data[(i * 4) + 3] = 255;
}
const ctx = canvas.getContext('2d');
ctx.putImageData(imgData, 0, 0);
// zoom for demo
ctx.imageSmoothingEnabled = false;
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(canvas,10,10,10*canvas.width,10*canvas.height);

<canvas id="canvas"></canvas>

Answer 2

Поскольку счетчик вашего цикла увеличивается на четыре каждый раз - просто используйте ++:

for (i = 0; i < pixel_array.length; i++) {...}