Question

我有一个有效的网络功能，它使用html5视频和画布访问设备相机的mediaStream，然后拍摄照片并在画布中渲染图像。效果很好，但我想使用konvajs舞台而不是画布。

代码

    I created a new konva image object:

      var video = new Konva.Image({
      node:video,
      x: 50,
      y: 50,
     image: vidObj,
     width: 300,
     height: 300
    });

完整的代码在这里：https://jsfiddle.net/tommy6s/63qbt12b/

Answer 1

我认为最好的方法是将视频绘制到canvas元素中，然后使用此画布作为Konva.Image的来源：

// create canvas
var width = 300;
var height = 300;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);

var vidObj = new Image();
var snap = layer.findOne('.snap');
if (!snap) {
    snap = new Konva.Image({
      image: canvas,
      x: 50,
      y: 50,
      width: 300,
      height: 300,
      name: 'snap'
    });
    layer.add(snap);
}
snap.image(canvas);
layer.draw();

https://konvajs.github.io/docs/sandbox/Video_On_Canvas.html

将视频添加到konvajs阶段

1 个答案: