Question

我有一个问题。

我需要从我的网络摄像头捕获一个iamgem，并使用此图像在画布上工作。

我的代码是：

  Webcam.set({
            width: 640,
            height: 480,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#my_camera');


        function take_snapshot() {
            Webcam.snap(function (data_uri) {


                var canvas = document.getElementById("results");
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.drawImage(data_uri, 0, 0);


            });
        }

这是我尝试的，我知道这是错误的。

那么我需要做些什么来解决这个问题？

Answer 1

drawImage()无法直接绘制数据uris，因此首先将它们转换为图像元素：

Webcam.snap(function (data_uri) {
  var canvas = document.getElementById("results");
  var ctx = canvas.getContext("2d");
  var img = new Image();         // create an image element for data-uri
  img.onload = function() {      // add async handler
    ctx.drawImage(this, 0, 0);   // when loaded, draw image (this)
    // goto next step from here as this block is async
  };
  img.src = data_uri;            // set data-uri as source
});

使用画布在网络摄像头中捕获的图像

1 个答案: