Question

我是js和html的新手，我有一张背景图片，他的头部被拔掉了。而不是头部，有一个供他人放置的网络摄像头他的头而不是角色。它的工作正常，但我想添加一个按钮给我一个选项，以同时捕获网络摄像头+背景（网络摄像头+人物背景中某人的头像的图片）并将其保存到我的本地计算机中。 html2canvas不适用于我，导致其不适用于Flash。当我尝试我的代码时，它只保存了我的摄像头而没有背景。如果有人可以帮助我，那将非常好，再次感谢！到目前为止，这是我的代码：

<script>
const vid = document.querySelector('video');
navigator.mediaDevices.getUserMedia({video: true}) // request cam
.then(stream => {
  vid.srcObject = stream; // don't use createObjectURL(MediaStream)
  return vid.play(); // returns a Promise
})
.then(()=>{ // enable the button
  const btn = document.querySelector('button');
  btn.disabled = false;
  btn.onclick = e => {
    takeASnap()
    .then(download);
  };
})
.catch(e=>console.log('please use the fiddle instead'));

function takeASnap(){
  const canvas = document.createElement('canvas'); // create a canvas
  const ctx = canvas.getContext('2d'); // get its context
  canvas.width = vid.videoWidth; // set its size to the one of the video
  canvas.height = vid.videoHeight;
  ctx.drawImage(vid, 0,0); // the video
  return new Promise((res, rej)=>{
    canvas.toBlob(res, 'image/jpeg'); // request a Blob from the canvas
  });
}
function download(blob){
  // uses the <a download> to download a Blob
  let a = document.createElement('a'); 
  a.href = URL.createObjectURL(blob);
  a.download = 'screenshot.jpg';
  document.body.appendChild(a);
  a.click();
}</script>

<style>

#tv_container {
    width: 1920px; /* Adjust picture image width */
    height: 1080px; /* Adjust picture image height */
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
    background: url('images/edison.png') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
#tv_container video {
    position: absolute;
    top: 150px; /* Adjust top position */
    left: 600px; /* Adjust left position */
    z-index: 5;
}
</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>newton</title>
  
</head>
  
<body>
<div id="tv_container">
<video id="vid"></video>
</div>
<button>take a snapshot</button>
</body>
</html>

javascript-制作带有背景视频的屏幕截图按钮

0 个答案: