HTML5在线摄像头拍照上传并保存到服务器

1.//读取视频流
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia)
{
if (navigator.webkitURL)
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
else
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
}
else
{
alert("navigator.getUserMedia Error");
}

2.拍照上传

function scamera()
     { 
        //拍照
    var ctx = canvas.getContext('2d');
      canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;        
        ctx.drawImage(video, 0, 0,640,480);              
    
    var imgData=canvas.toDataURL(); 
    //alert(imgData);
    var imgData=imgData.substring(22);
    //alert(data);
        
        $.ajax({
    type: "POST",
    url: "FaceServlet",
  data: {"img":imgData},
    success: function(msg){
     
    }
});         
     }

3.在后台servlet接收并保存到服务器     
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String imgData = request.getParameter("img");
        //System.out.println("imgData:"+imgData);

        //保存的图片的名称   
        String fileName =System.currentTimeMillis() + ".png";
        //System.out.println("fileName:"+fileName);
        //获得picture文件夹在tomcat中的绝对路径
        String basePath = request.getSession().getServletContext().getRealPath("/picture/");
        String filePath = basePath;   
        System.out.println("保存图片的地址为："+filePath);  
        BASE64Decoder decoder = new BASE64Decoder();
//String imageString = "";
try {
byte[] bytes1 = decoder.decodeBuffer(imgData);


ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
BufferedImage image = ImageIO.read(bais);
if (image != null) 
       {     
           //保存图片到指定的目录和文件中             
           ImageIO.write(image, "png", new File(filePath , fileName));   
       }    


} catch (IOException e) {
e.printStackTrace();
}
       

} 

4.HTML代码：

<div><video id="monitor" autoplay></video></div>
<div><canvas id="photo" width="640" higth="480" style="display:none"></canvas></div>
<div><input id="Button" type="button" value="拍照" οnclick="scamera()" /></div>

备注：

保存的图片名称以“png”或“jpg”结尾的会有不同的效果。以“jpg”结尾的，保存下来的图片是红色的，我也不知道为什么。以“png”格式结尾的就是正常的。如果能有朋友告诉我这是为什么？那再完美不过了！