0

html5ビデオとキャンバスを使用してデバイスカメラのmediaStreamにアクセスし、写真を撮ってキャンバスに画像をレンダリングするWeb機能が機能しています。うまく機能しますが、キャンバスの代わりに 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/

4

1 に答える 1

2

ビデオをキャンバス要素に描画し、このキャンバスを次のソースとして使用するのが最善の方法だと思います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

于 2015-11-05T03:27:12.080 に答える