Chrome 谷歌瀏覽器呼叫攝像頭並拍照上傳 java示例
阿新 • • 發佈：2019-01-07
html頁面：
<!DOCTYPE html> <html> <head> <title>html5呼叫攝像頭實現拍照</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="assets\js\jquery-2.0.3.min.js" ></script> </head> <body> <video id="video" autoplay=""style='width:640px;height:480px'></video> <button id="paizhao">拍照</button> <canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript"> var video=document.getElementById("video"); var context=canvas.getContext("2d"); var errocb=function(){ console.log("sth srong"); } if(navigator.getUserMedia){ navigator.getUserMedia({"video":true},function(stream){ video.src=stream; video.play(); },errocb); }else if(navigator.webkitGetUserMedia){ navigator.webkitGetUserMedia({"video":true},function(stream){ video.src=window.webkitURL.createObjectURL(stream); video.play(); },errocb); } document.getElementById("paizhao").addEventListener("click",function(){ context.drawImage(video,0,0,640,480); var canvas=document.getElementById("canvas"); var imgData=canvas.toDataURL("image/png"); var data=imgData.substr(22); $.ajax({ url:'CanvasServlet', data:{ imedata:data }, type:'post', success:function(data){ if(data=='true'){ alert('上傳成功'); }else{ alert('上傳失敗'); } } }); }); </script> </body> </html>
servlet後臺接收並儲存：
package com.servlet; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import sun.misc.BASE64Decoder; /** * Servlet implementation class CanvasServlet */ @WebServlet("/CanvasServlet") public class CanvasServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CanvasServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String base64Data = request.getParameter("imedata"); System.out.println(base64Data); if(base64Data!=null){ BASE64Decoder deoder = new BASE64Decoder(); try { byte[] b = deoder.decodeBuffer(base64Data); for(int i = 0 ; i<b.length;i++){ if(b[i]<0){//調整異常資料 b[i]+=256; } } File f = new File("e://canvas"); if(!f.exists()){ f.mkdir(); } //生成圖片 String filepath = "e://canvas//1.png"; OutputStream out1 = new FileOutputStream(filepath); out1.write(b); out1.flush(); out1.close(); rs(response,"true"); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); rs(response,"false"); } }else{ rs(response,"false"); } } public void rs(HttpServletResponse response,String rs){ PrintWriter out; try { out = response.getWriter(); out.print(rs); out.flush(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }