js开启摄像头(头像采集)

js开启摄像头,拍摄图片,传递到后台,保存到本地

---

html代码

<video id="video" width="400" height="300"></video>
 <button id='tack'> snap shot</button>
 <canvas id='canvas' width='400' height='300'></canvas>
 <img id='img' src=''>

js代码

<script>
     var video = document.getElementById('video'),
             canvas = document.getElementById('canvas'),
             snap = document.getElementById('tack'),
             img = document.getElementById('img'),
                 vendorUrl = window.URL || window.webkitURL; //媒体对象
//mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，
    该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
          //    var mediaDevices = navigator.mediaDevices;
//MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员
        // navigator.mediaDevices.getUserMedia() ;  
 //Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
  
   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {    //如果可以得到     

            //MediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可，
                    媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。
                    此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和
                        屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、
                            A/D转换器等等），也可能是其它轨道类型。 详细介绍看API

                          navigator.mediaDevices.getUserMedia({
                                       video: { width: 500, height: 500 },
                                         audio: false
                             }).then(function(stream) {
                                             video.srcObject = stream;    //将生成的媒体流给video作为视频流播放
                                             video.play();     //播放视频
                                         }).catch(function(err) {
                                                     console.log(err);
                                             });
       } else {
             this.$Message.error('没有检测到摄像头,请确认链接!!!');
         }

//响应点击时间 保存视频区域成图片

         snap.addEventListener('click', function(){
                           //绘制canvas图形canvas的详细手册
                     canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
                        //把canvas图像转为img图片

                         / /canvas.toDataURL(type, encoderOptions);
                             //type 可选    图片格式，默认为 image/png
                                //encoderOptions 可选    在指定图片格式为 image/jpeg 或 image/webp的情况下，
                                //可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。
                                //其他参数会被忽略。 返回值 包含 data URI 的DOMString。  
                     img.src = canvas.toDataURL("image/png");
                 }
           )
     </script>

java代码

    //canvasUrl      canvas生成的base64编码的图片信息,也就是上面说的canvas.toDataURL("image/png");
    //filePth     上传文件的路径 
private String addCanvasPic(String canvasUrl,String filePth)throws Exception {
                 String imageDateB64 = canvasUrl.substring(22); //处理canvasUrl,去掉头信息data:image/png;base64
               BASE64Decoder decoder = new BASE64Decoder(); //此类是sun公司的内部类,无法直接使用,百度解决
                byte[] b = decoder.decodeBuffer(imageDateB64);//解码转成字节数组
                 ByteArrayInputStream bais = new ByteArrayInputStream(b); //字节数组输入流
                 BufferedImage bufferedImage = ImageIO.read(bais); //    将图片加载到内存中
                //因为js里我们生成的图片是png格式,如果想转化格式的话,在内存中创建一个新的等大的空白图片
                  BufferedImage newBufferedImage =
     new BufferedImage(bufferedImage.getWidth(),bufferedImage.getHeight(), BufferedImage.TYPE_INT_RGB);
                //在新图片生绘制老图片
                 newBufferedImage.createGraphics().drawImage(bufferedImage, 0, 0, null);
                 String dirPath = AppConfig.getUploadRoot() +filePth ;
                 //File dirFile = new File(dirPath);
                // if (!dirFile.exists()){
                             // dirFile.mkdirs();
                    // }
                    //创建一个.JPG文件
                     File newFile = new File(dirPath+".jpg");
                    //将内存中的图片写入到本地文件
                     ImageIO.write(newBufferedImage, "jpg", newFile);
                 return dirPath+".jpg";
             }

浪客行1213的简书

---

XHH