javascript - 编辑 JavaScript/HTML5 视频中的像素数据(处理为 JS 翻译)

Question

我正在尝试用 JavaScript 重新创建为网络摄像头处理草图制作的效果，以便在 HTML5 视频/ Canvas 标记设置上实现它。我对这一切都很陌生，我只是遇到了一些问题，以查找执行类似操作(例如像素读取和调整)所需的功能等

哦，在我正在构建的基于网络的版本中，我使用预加载的视频来执行效果，而不是网络摄像头，但这一切都已设置完毕。

任何帮助将不胜感激!谢谢!!

import processing.video.*;
    Capture video;

    PImage lastImage;
    float threshold = 50;

    float rAdd = random(55);
    float gAdd = random(55);
    float bAdd = random(55);
    float colorAdd;

    void setup() {
      colorMode(HSB);
      size(640, 512);
      smooth();
      video = new Capture(this, width, height, 30);
      video.start();
      lastImage = createImage(video.width, video.height, RGB);
    }

    void draw() {

      lastImage.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);
      lastImage.updatePixels();
      video.read();

      loadPixels();
      video.loadPixels();
      lastImage.loadPixels();


      for (int x = 0; x < video.width; x++) {
        for (int y = 0; y < video.height; y++) {
          int loc = x + y*width;
          color current = video.pixels[loc];
          color previous = lastImage.pixels[loc];
          float r1 = red(current);
          float g1 = green(current);
          float b1 = blue(current);
          float r2 = red(previous);
          float g2 = green(previous);
          float b2 = blue(previous);
          float difference = dist(r1, g1, b1, r2, g2, b2);
          if (difference > threshold) {
          //  pixels[loc] += 400;
            colorAdd = random(100,400);
            pixels[loc] = color(r2+rAdd, g2+gAdd, b2+bAdd);
          } 
          else {
           pixels[loc] -= 5;
          }
        }
      }
      updatePixels();
    }

Answer 1

我不熟悉处理，但我相信 JavaScript 映射是:

创建图像

<canvas> 是 HTML 绘图表面。创建一个:

var canvas = document.createElement('canvas').  

从 Canvas 中，您可以获得一个 CanvasRenderingContext2D，用于在 Canvas 上进行绘制和读取。获取它:

var context = canvas.getContext('2d');

lastImage.copy(video, 0, 0, video.width, video.height, 0, 0, video.width, video.height);

您可以使用 context.drawImage() 将视频绘制到 Canvas 上方法:

context.drawImage(video, ...dimensions);

视频像素

要获取视频的像素，请使用 context.getImageData() :

var imageData = context.getImageData();

// imageData.data contains the r, g, b, a data from the video  

updatePixels()

操作完 imageData.data 后，您可以使用 context.putImageData() 将其放回 Canvas 中。

context.putImageData(imageData, 0, 0);