如何在js中保存用window.getusermedia拍摄的图片

在JavaScript中保存使用window.getUserMedia拍摄的图片，可以通过以下步骤实现：

首先，使用navigator.mediaDevices.getUserMedia方法获取用户的媒体设备权限，包括摄像头和麦克风。该方法返回一个Promise对象，可以使用then方法处理成功的回调函数。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 在成功获取媒体设备权限后，可以进行后续操作
  })
  .catch(function(error) {
    // 处理获取媒体设备权限失败的情况
  });

在成功获取媒体设备权限后，可以通过window.URL.createObjectURL方法将媒体流转换为可用于显示的URL。然后，将该URL赋值给一个<video>元素的src属性，以便实时预览摄像头的内容。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    var videoElement = document.getElementById('video');
    videoElement.src = window.URL.createObjectURL(stream);
  })
  .catch(function(error) {
    // 处理获取媒体设备权限失败的情况
  });

当需要保存拍摄的图片时，可以使用<canvas>元素将视频帧绘制到画布上，并通过toDataURL方法将画布内容转换为Base64编码的图像数据。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    var videoElement = document.getElementById('video');
    var canvasElement = document.getElementById('canvas');
    var context = canvasElement.getContext('2d');

    videoElement.src = window.URL.createObjectURL(stream);

    // 当需要保存图片时，绘制视频帧到画布上
    function captureImage() {
      context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
      var imageData = canvasElement.toDataURL('image/png');

      // 将Base64编码的图像数据发送到服务器保存或进行其他处理
      // 可以使用XMLHttpRequest或fetch方法发送POST请求
      // 示例代码：
      // fetch('/save-image', {
      //   method: 'POST',
      //   body: JSON.stringify({ image: imageData }),
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // })
      // .then(function(response) {
      //   // 处理服务器响应
      // })
      // .catch(function(error) {
      //   // 处理请求错误
      // });
    }

    // 在需要保存图片的时机调用captureImage函数
    // 示例代码：
    // var captureButton = document.getElementById('capture-button');
    // captureButton.addEventListener('click', captureImage);
  })
  .catch(function(error) {
    // 处理获取媒体设备权限失败的情况
  });

以上代码示例中，<video>元素用于实时预览摄像头的内容，<canvas>元素用于绘制视频帧并保存为图片。你可以根据实际需求，将代码集成到你的项目中，并根据具体情况进行适当的调整。

注意：为了保证兼容性，建议在使用getUserMedia方法前检测浏览器是否支持该方法，可以使用navigator.mediaDevices.getUserMedia或navigator.getUserMedia进行检测。