在画布上渲染一系列RGB像素

Question

我有这个问题，我有一个插座，可以向我发送包含一排框架的每个数据包。使用Python I将全帧重建为RBG像素阵列。我如何使用WebGL或类似的东西在画布上渲染这些像素数组？

使用Python SDL2非常容易，现在我需要在网页上进行同样的操作。

Answer 1

给定表格的RGBA数据[[[123,32,40,255]，[3,233,42,120]，...]，这将返回带有该数据的画布：

function createCanvasFromRGBAData(data, width, height) {
  // `data` should look something like [[123,32,40,255], [3,233,42,120], ...]
  if(width*height !== data.length) throw new Error("width*height should equal data.length");
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext("2d");
  let imgData = ctx.createImageData(width, height);
  for(let i = 0; i < data.length; i++) {
    imgData.data[i*4+0] = data[i][0];
    imgData.data[i*4+1] = data[i][1];
    imgData.data[i*4+2] = data[i][2];
    imgData.data[i*4+3] = data[i][3];
  }
  ctx.putImageData(imgData, 0, 0);
  return canvas;
}

Answer 2

这是我的新且改进的答案：

问题是您无法快速加载像素，使它们很容易。那么，为什么不重复使用已经加载的像素呢？我创建的是一种自动化的方法，可以加载一系列像素并保存以后将其保存。这是不优化的代码：

let render;
let pixelArray;

function setup() {
  
  createCanvas(640, 480);
  
  render = new renderPixels();
  
  pixelArray = Array(width*height).fill(0);
  
  pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) });
  
  render.newImage("random", pixelArray, height, width);
  
  pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) });
  
  render.newImage("random2", pixelArray, height, width);
  
  pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) });
  
  render.newImage("random3", pixelArray, height, width);
  
  frameRate(5) //<-- Decrease to see full potential
  
}

function draw() {
  
  background(220);
  
  if(frameCount % 3 == 0){
  
    render.loadImage(0, 0, "random");
  
  } else if(frameCount % 3 == 1){
    
    render.loadImage(0, 0, "random2");
    
  } else {
    
    render.loadImage(0, 0, "random3");
    
  }
    
}

class renderPixels {
  
  constructor(){
    
    this.loadedImages = {}
    
  }
  
  newImage(name, arr, height, width){
  
    let img = createImage(height, width);

    img.loadPixels();

    for(let p = 0; p < (4 * height * width); p+=4){

      const l = arr[p/4].levels;
      
      img.pixels[p] = l[0];
      img.pixels[p+1] = l[1];
      img.pixels[p+2] = l[2];
      img.pixels[p+3] = l[3];

    }
    
    img.updatePixels();
    
    this.loadedImages[name] = img;
    
  }
  
  loadImage(x, y, name){
    
    image(this.loadedImages[name], x, y);
    
  }
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>

I could make this into vanilla JavaScript if you like, but I need to know the format of array of RGB pixels you talk about. Currently I'm using P5.js's color() function (which isn't very optimized) and it's working well enough.

Answer 3

我在这里找到了一种有趣的方法来渲染一个像素：在HTML5帆布中设置单个像素的最佳方法是什么？

我认为Vanilla JavaScript中没有办法一次呈现单个像素，但是图书馆p5.js p5.js （我经常使用）确实具有此功能。

其他几种方法是1）只有1x1平方渲染（充当像素）。 2）在上面的stackoverflow链接中使用1x1图像。

编辑：

我发现了关于此问题的Anouther Stackoverflow，显然我对Vanilla JavaScript是错误的：在HTML5画布上绘制一个点