0

我正在尝试重新创建我为 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();
    }
4

1 回答 1

2

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

创建图像

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

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

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

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

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

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

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

视频.像素

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

var imageData = context.getImageData();

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

更新像素（）

处理完 imageData.data 后，您可以将其放回画布中context.putImageData()

context.putImageData(imageData, 0, 0);
于 2013-10-23T05:13:15.313 回答