// 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 

if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];

      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  } 

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);

      mediaStreamTrack = typeof stream.stop === 'function' "htmlcode">

{
  video: true,
  audio: true
} 


想关闭摄像头，就需要调用MediaStream.getTracks()[1].stop();


同理，0对应于audio的track


使用createObjectURL 将MediaStream写入video标签，就能够存储实时的媒体流数据（也可以方便的实时查看画面）


旧版本中webkitURL 对象以不被支持，需要使用URL对象




　　<video width="200" height="150"></video>
  <canvas width="200" height="150"></canvas>

  <p>
    <button id="snap">截取图像</button>
    <button id="close">关闭摄像头</button>
    <button id="upload">上传图像</button>
  </p>

  <img id="uploaded" width="200" height="150" /> 


2. 截取图像


将内容写入即可




 // 截取图像
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false); 


3. 关闭摄像头




 // 关闭摄像头
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 


4. 上传截取的图像


canvas.toDataURL('image/png')




// 上传截取的图像
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);

      console.log(rs);

      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false); 




而这里的后端（PHP）则将获取的内容转换成图像文件保存


需要注意的是，要将base64的头部信息字段去掉再保存，否则似乎图像是损坏无法打开滴




 <"htmlcode">

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                

                                    js图片头像截图上传,js实现图片截图并上传,js,上传图片可以截图 
                                
DDR爱好者之家 Design By 杰米