Javascript 摄像头Web应用程序-保存和导入图像_Javascript_Html_Css

Javascript 摄像头Web应用程序-保存和导入图像

javascript html css

Javascript 摄像头Web应用程序-保存和导入图像,javascript,html,css,Javascript,Html,Css,我正在尝试制作一个网站，使用用户设备拍摄照片，并让用户选择保存图像以备日后使用，或允许用户导入他们已经拥有的图像。我可以在网站上安装摄像头并拍照，但它只会出现在屏幕的右上角，有人能帮我让网站保存图像，然后我如何也可以得到从用户设备导入图像的能力这是我目前掌握的代码 HTML: CSS: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"

我正在尝试制作一个网站，使用用户设备拍摄照片，并让用户选择保存图像以备日后使用，或允许用户导入他们已经拥有的图像。我可以在网站上安装摄像头并拍照，但它只会出现在屏幕的右上角，有人能帮我让网站保存图像，然后我如何也可以得到从用户设备导入图像的能力

这是我目前掌握的代码

HTML:

CSS:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Name of your awesome camera app -->
<title>Lets Scan</title>
<!-- Link to your main style sheet-->
    <link rel="stylesheet" href="CSS/LetsScan.css">
</head>
<body>
      <!-- Navigation Bar Code-->
<nav class="navbar">
  <a href="Home.html"> Home</a>
  <a href="LetsScan.html">Lets Scan</a>
  <a href="AboutUs.html">About Us</a>
  <a href="ContactUs.html">Contact Us</a>
</nav>
<!-- Camera -->
    <main id="camera">
        <!-- Camera sensor -->
        <canvas id="camera--sensor"></canvas>
        <!-- Camera view -->
        <video id="camera--view" autoplay playsinline></video>
        <!-- Camera output -->
        <img src="//:0" alt="" id="camera--output">
        <!-- Camera trigger -->
        <button id="camera--trigger">Take a picture</button>
    </main>
    <!-- Reference to your JavaScript file -->
    <script src="js/letsscan.js"></script>


</body>
</html>

// Set constraints for the video stream
var constraints = { video: { facingMode: "user" }, audio: false };
// Define constants
const cameraView = document.querySelector("#camera--view"),
    cameraOutput = document.querySelector("#camera--output"),
    cameraSensor = document.querySelector("#camera--sensor"),
    cameraTrigger = document.querySelector("#camera--trigger")
// Access the device camera and stream to cameraView
function cameraStart() {
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
        track = stream.getTracks()[0];
        cameraView.srcObject = stream;
    })
    .catch(function(error) {
        console.error("Oops. Something is broken.", error);
    });
}
// Take a picture when cameraTrigger is tapped
cameraTrigger.onclick = function() {
    cameraSensor.width = cameraView.videoWidth;
    cameraSensor.height = cameraView.videoHeight;
    cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
    cameraOutput.src = cameraSensor.toDataURL("image/webp");
    cameraOutput.classList.add("taken");
};
// Start the video stream when the window loads
window.addEventListener("load", cameraStart, false);

       /* Style the top navigation bar */
   .navbar {
    overflow: hidden; /* Hide overflow */
    background-color: #333; /* Dark background color */
  }

  /* Style the navigation bar links */
  .navbar a {
    float: left; /* Make sure that the links stay side-by-side */
    display: block; /* Change the display to block, for responsive reasons (see below) */
    color:  white; /* White text color */
    text-align: center; /* Center the text */
    padding: 14px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
  }

  /* Right-aligned link */
  .navbar a.right {
    float: right; /* Float a link to the right */
  }

  /* Change color on hover/mouse-over */
  .navbar a:hover {
    background-color: #ddd; /* Grey background color */
    color: black; /* Black text color */
  }

  html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }
  #camera, #camera--view, #camera--sensor, #camera--output{
      position: fixed;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #camera--view, #camera--sensor, #camera--output{
      transform: scaleX(-1);
      filter: FlipH;
  }
  #camera--trigger{
      width: 200px;
      background-color: black;
      color: white;
      font-size: 16px;
      border-radius: 30px;
      border: none;
      padding: 15px 20px;
      text-align: center;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      position: fixed;
      bottom: 30px;
      left: calc(50% - 100px);
  }
  .taken{
      height: 100px!important;
      width: 100px!important;
      transition: all 0.5s ease-in;
      border: solid 3px white;
      box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
      top: 20px;
      right: 20px;
      z-index: 2;
  }