Question

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

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

任何帮助都会非常感激!!!谢谢！

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

我不熟悉Processing，但我相信JavaScript映射是：

<强>的createImage

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

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

从画布中，您可以获得CanvasRenderingContext2D，您可以使用它从画布中绘制和读取。得到它：

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

lastImage.copy（视频，0,0，video.width，video.height，0,0，video.width，video.height）;

您可以使用context.drawImage()方法将视频绘制到画布：

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

<强> video.pixels

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

var imageData = context.getImageData();

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

<强> updatePixels（）

操作完imageData.data后，可以使用context.putImageData()

将其放回画布中

context.putImageData(imageData, 0, 0);

在JavaScript / HTML5视频中编辑像素数据（处理到JS翻译）

1 个答案: