1. PingCode智库首页
  2. 百科

js怎么调用相机拍照保存图片

Edit2 • • 百科

js怎么调用相机拍照保存图片

JS调用相机拍照并保存图片的方法主要包括使用HTML5的设备访问API、利用WebRTC技术、以及结合第三方库来实现。具体步骤包括：获取用户权限、调用设备摄像头、捕获图像、保存图像。 其中，利用HTML5的设备访问API是最为常见和简单的方法。下面详细描述这个方法。

一、利用HTML5的设备访问API

HTML5新增的设备访问API使得我们可以轻松地访问设备的摄像头并捕获图像。以下是详细步骤和实现代码。

1、获取用户权限

为了访问用户的摄像头，首先需要获取用户的许可。这是通过调用navigator.mediaDevices.getUserMedia方法实现的。

navigator.mediaDevices.getUserMedia({ video: true })


  .then(function(stream) {


    // 将视频流设置为视频元素的源


    var video = document.querySelector('video');


    video.srcObject = stream;


    video.play();


  })


  .catch(function(err) {


    console.log("An error occurred: " + err);


  });

这段代码成功获取到用户权限后，会将摄像头的视频流绑定到一个<video>元素上。

2、调用设备摄像头

在获取到视频流后，需要将视频流显示在网页上。通常我们会在页面上添加一个<video>元素用于显示摄像头捕获的实时视频。

<video id="video" width="640" height="480" autoplay></video>

3、捕获图像

当用户点击按钮时，可以捕获当前的视频帧并显示在画布上。我们可以在页面上添加一个<canvas>元素来显示捕获的图像。

<canvas id="canvas" width="640" height="480"></canvas>


<button id="snap">Capture</button>

然后，使用JavaScript代码实现捕获功能：

var canvas = document.getElementById('canvas');


var context = canvas.getContext('2d');


var video = document.getElementById('video');


document.getElementById('snap').addEventListener('click', function() {


  context.drawImage(video, 0, 0, 640, 480);


});

4、保存图像

捕获到图像后，可以将图像保存为文件。我们可以使用canvas的toDataURL方法将图像转换为Base64编码的URL，然后下载该URL。

document.getElementById('save').addEventListener('click', function() {


  var dataURL = canvas.toDataURL('image/png');


  var link = document.createElement('a');


  link.href = dataURL;


  link.download = 'photo.png';


  link.click();


});

完整代码示例

以下是一个完整的HTML和JavaScript代码示例：

<!DOCTYPE html>


<html>


<head>


  <title>Camera Capture</title>


</head>


<body>


  <h1>Camera Capture</h1>


  <video id="video" width="640" height="480" autoplay></video>


  <button id="snap">Capture</button>


  <button id="save">Save</button>


  <canvas id="canvas" width="640" height="480"></canvas>


  <script>


    navigator.mediaDevices.getUserMedia({ video: true })


      .then(function(stream) {


        var video = document.getElementById('video');


        video.srcObject = stream;


        video.play();


      })


      .catch(function(err) {


        console.log("An error occurred: " + err);


      });


    var canvas = document.getElementById('canvas');


    var context = canvas.getContext('2d');


    var video = document.getElementById('video');


    document.getElementById('snap').addEventListener('click', function() {


      context.drawImage(video, 0, 0, 640, 480);


    });


    document.getElementById('save').addEventListener('click', function() {


      var dataURL = canvas.toDataURL('image/png');


      var link = document.createElement('a');


      link.href = dataURL;


      link.download = 'photo.png';


      link.click();


    });


  </script>


</body>


</html>

二、利用WebRTC技术

WebRTC（Web Real-Time Communication）提供了浏览器和移动应用程序之间进行实时语音对话或视频对话的功能。它也可以用于访问用户的摄像头并捕获图像。

1、获取用户权限

与使用HTML5设备访问API类似，首先需要获取用户的摄像头访问权限。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;


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


  var video = document.querySelector('video');


  video.srcObject = stream;


  video.play();


}, function(err) {


  console.log("An error occurred: " + err);


});

2、显示视频流

同样，需要在页面上添加一个<video>元素来显示视频流。

<video id="video" width="640" height="480" autoplay></video>

3、捕获和保存图像

捕获图像的过程和前面介绍的HTML5设备访问API的方法类似。

<canvas id="canvas" width="640" height="480"></canvas>


<button id="snap">Capture</button>


<button id="save">Save</button>



var canvas = document.getElementById('canvas');


var context = canvas.getContext('2d');


var video = document.getElementById('video');


document.getElementById('snap').addEventListener('click', function() {


  context.drawImage(video, 0, 0, 640, 480);


});


document.getElementById('save').addEventListener('click', function() {


  var dataURL = canvas.toDataURL('image/png');


  var link = document.createElement('a');


  link.href = dataURL;


  link.download = 'photo.png';


  link.click();


});

三、结合第三方库

有一些第三方库可以简化摄像头访问和图像捕获的过程，例如WebcamJS。使用这些库可以更方便地实现相机拍照和保存图片的功能。

1、引入WebcamJS库

首先，需要在页面中引入WebcamJS库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>

2、初始化摄像头

使用WebcamJS库，可以轻松地初始化摄像头并显示视频流。

<div id="camera"></div>


<button id="capture">Capture</button>


<button id="save">Save</button>


<div id="results"></div>



Webcam.set({


  width: 640,


  height: 480,


  image_format: 'png',


  png_quality: 90


});


Webcam.attach('#camera');


document.getElementById('capture').addEventListener('click', function() {


  Webcam.snap(function(data_uri) {


    document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';


  });


});


document.getElementById('save').addEventListener('click', function() {


  Webcam.snap(function(data_uri) {


    var link = document.createElement('a');


    link.href = data_uri;


    link.download = 'photo.png';


    link.click();


  });


});

3、完整代码示例

以下是一个完整的HTML和JavaScript代码示例：

<!DOCTYPE html>


<html>


<head>


  <title>Camera Capture with WebcamJS</title>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>


</head>


<body>


  <h1>Camera Capture with WebcamJS</h1>


  <div id="camera"></div>


  <button id="capture">Capture</button>


  <button id="save">Save</button>


  <div id="results"></div>


  <script>


    Webcam.set({


      width: 640,


      height: 480,


      image_format: 'png',


      png_quality: 90


    });


    Webcam.attach('#camera');


    document.getElementById('capture').addEventListener('click', function() {


      Webcam.snap(function(data_uri) {


        document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';


      });


    });


    document.getElementById('save').addEventListener('click', function() {


      Webcam.snap(function(data_uri) {


        var link = document.createElement('a');


        link.href = data_uri;


        link.download = 'photo.png';


        link.click();


      });


    });


  </script>


</body>


</html>

通过以上三种方法，您可以在网页中实现调用相机拍照并保存图片的功能。根据具体需求，可以选择适合的方法进行实现。

相关问答FAQs：

1. 如何在JavaScript中调用相机进行拍照并保存图片？

要在JavaScript中调用相机进行拍照并保存图片，你可以使用HTML5的<input type="file">元素，并设置其accept属性为"image/*"，这样就可以让用户选择拍照或从相册中选择图片。然后，通过JavaScript的FileReader对象读取用户选择的图片，并将其显示在页面上。

2. 如何将通过相机拍摄的照片保存到服务器上？

要将通过相机拍摄的照片保存到服务器上，你需要使用JavaScript中的XMLHttpRequest对象或fetch API来发送POST请求。在请求中，你需要将拍摄的照片数据作为请求体，并在服务器端进行处理，将其保存到指定的目录中。

3. 我可以在移动设备上使用JavaScript调用相机拍照吗？

是的，你可以在移动设备上使用JavaScript调用相机进行拍照。通过使用HTML5的getUserMedia方法，你可以在移动设备上访问摄像头，并实时显示摄像头的画面。然后，你可以使用JavaScript的Canvas对象将拍摄的画面绘制为图片，并保存到本地或上传到服务器。请注意，不同的移动设备和浏览器可能会有一些兼容性问题，你需要对不同的设备和浏览器进行适配。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3616737

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部