javascript - Phonegap 实时摄像头捕捉

Question

我想构建一个应用程序，其中我的页面背景是来自相机的图像(实时，随着我的移动而更新)

有人知道将相机“ View ”捕捉到 Canvas 或 div 上的背景图像的插件或方法吗？

Answer 1

可能的插件:https://github.com/shaithana/cordova-plugin-wezka-nativecamera

您无法自行将捕获的图像放置在 Canvas 元素上来解决这个问题:

var options = {
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: window.innerWidth,
    targetHeight: window.innerHeight,
    correctOrientation: true
};

navigator.camera.getPicture(function (imageData) {

  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");

  var image = new Image();
  image.src = "data:image/jpeg;base64," + imageData;
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
  };

}, function (err) {
   console.log(err);
// An error occurred. Show a message to the user
}, options);

风格:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}