Question

如果这是重复的话，我事先表示歉意这个：Transfer data from one HTML file to another 从一个HTML文件到另一个

但是，我有一些代码可以在用户的网络摄像头上运行用户的视频，当他们单击“捕获”按钮时，将为其截图并显示在同一页面上。我想将其保存到新页面进行编辑，但我不知道该怎么做。

Index.HTML（需要截图的摄像机代码）

<!--Create a screenshot-->
  <video class="center" id="player" controls autoplay></video>
  <button class= "btn" id="capture">Capture</button>
  <canvas id="canvas" width=320 height=240></canvas>

  <!--Create a button to go to next page-->
  <button class= "btn2" id="capture" 
 onclick="location.href='editor.html'">Next</button>

<!--Create a button to go to retake a photo-->
<button class= "btn3" id="capture" 
onClick='window.location.reload()'>Retake</button>



  <script>
    const player = document.getElementById('player');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const captureButton = document.getElementById('capture');

    const constraints = {
     video: true,
    };

    captureButton.addEventListener('click', () => {
      context.drawImage(player, 0, 0, canvas.width, canvas.height);

      // Stop all video streams.
      player.srcObject.getVideoTracks().forEach(track => 
      track.stop());
    });

    navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      // Attach the video stream to the video element and autoplay.
      player.srcObject = stream;
    });

</script>
</body>
</html>

editor.html（我想将屏幕截图显示在页面上）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
   scale=1.0">

  <!--Browser Page Title-->
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Headwayz</title>
  <link rel="stylesheet" href="inspiration.css">
  <!-- <link href="https://fonts.googleapis.com/css? 
  family=Kaushan+Script" rel="stylesheet"> -->

  <!--Link to Google APIs-->
  <link href="https://fonts.googleapis.com/css? 
 family=Shadows+Into+Light" rel="stylesheet">
  <script src="https://use.fontawesome.com/f061fecdbc.js"></script>
</head>
<body>
  <script src="inspiration.js"></script>
</body>
<!--set up header for fixed header at top of screen-->
<div class="header" id="myHeader">
  <h1 align="center">Headwayz</h1>
  <p align= "center">Edit yourself, but know we think you are 
 naturally beautiful</p>  </div>

使用HTML / JS将屏幕快照保存到新页面进行编辑

0 个答案: