使用 putImageData 时我没有正确使用循环
I am not using a loop correctly when using putImageData
我正在从文件中读取 rgb 值并尝试将它们放在 canvas 上。
我尝试了许多不同的循环和增量值变体。
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 值设置为 canvas,但它是我想要的大小的 1/4。我想要我的变量中 rgb 值的精确副本。
因为您的循环计数器每次递增 4 - 只需使用 ++
:
for (i = 0; i < pixel_array.length; i++) {...}
因为pixel_array.length是数据中的像素数,所以您只需要迭代一个。
但是由于 ImageData.data 使用 4 个槽来表示一个像素,因此您需要将 i
变量乘以 4。
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>
我正在从文件中读取 rgb 值并尝试将它们放在 canvas 上。
我尝试了许多不同的循环和增量值变体。
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 值设置为 canvas,但它是我想要的大小的 1/4。我想要我的变量中 rgb 值的精确副本。
因为您的循环计数器每次递增 4 - 只需使用 ++
:
for (i = 0; i < pixel_array.length; i++) {...}
因为pixel_array.length是数据中的像素数,所以您只需要迭代一个。
但是由于 ImageData.data 使用 4 个槽来表示一个像素,因此您需要将 i
变量乘以 4。
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>