使用其他叠加层拍摄相机

问题描述 投票:4回答:1

我开发了一个WebApplication,它基本上允许用户注册和上传照片但是作为一个Mobile Ready网络应用程序,用户可以捕获实时照片并上传它。现在我被要求检查是否可以在拍摄图片时提供人像叠加,所以换句话说,当用户尝试捕捉时,他可以在屏幕上看到一个带有头部轮廓的肩膀,所以他将自己匹配到轮廓中抓住它..

我正在使用HTML5,并且明白它将通过一些插件或NATIVE APP(在这种情况下对我没有帮助)。

那么那里的任何人都尝试过这样的事情,或者知道我们能否做到这一点? (见附件了解更多)enter image description here

先感谢您。

html5 camera capture
1个回答
4
投票

这取决于您需要支持的设备。

对于支持getUserMedia API的那些,它非常简单,您只需将叠加层放在从摄像机获得的视频流上,并使用画布拍摄此视频的快照。

navigator.mediaDevices.getUserMedia({
  video: true
})
.then(function(stream) {

  vid.onloadedmetadata = function() {
    this.width = overlay.width = this.videoWidth;
    this.height = overlay.height = this.videoHeight;
  }
  vid.srcObject = stream;
  vid.play();
  overlay.onclick = function() {
    var c = document.createElement('canvas');
    c.width = vid.videoWidth;
    c.height = vid.videoHeight;
    c.getContext('2d').drawImage(vid, 0, 0);
    c.toBlob(doWhatYouWantWithTheCapturedImage);
  };
})
.catch(function(err) {
  console.error(err);
  document.body.innerHTML = '<a href="https://jsfiddle.net/3m4gj7dq/">Please try from jsfiddle</a>';
});

function doWhatYouWantWithTheCapturedImage(blob) {
  var url = URL.createObjectURL(blob);
  var img = new Image();
  img.onload = function() {
    URL.revokeObjectURL(url);
  };
  img.src = url;
  URL.revokeObjectURL(vid.src);
  overlay.parentNode.appendChild(img);
  vid.parentNode.removeChild(vid);
  overlay.parentNode.removeChild(overlay);
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}
<video id="vid"></video>
<img id="overlay" src="data:image/png;base64,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"
/>

但iOS <11不支持此API。

但是,您似乎正在使用的内容由操作系统直接提供,就像文件输入对话框一样,无法修改/个性化。

© www.soinside.com 2019 - 2024. All rights reserved.