jquery webcam + Java service Photo Upload instance

Front-end key code:

Custom Style <style type= "Text/css" >     #webcam  { border: 1px  solid  #666666; width: 320px; height: 240px; }     #photos  { border: 1px solid  #666666;  width: 320px; height: 240px; }     .btn { width: 320px; height: auto; margin: 5px  0px; }    .btn input[type=button] { width: 150px;  height: 50px; line-height: 50px; margin: 3px; }</style>//Show Content <div  id= "Webcam" ></div><div class= "btn" >    <input type= "button"  value= "Delete"  id= "delbtn"  onclick= "Delphoto ();" />    <input type= "button"  value= "Photo"  id= "savebtn"  onclick= " Savephoto (); " /></div><div id= "Photos" >    &Lt;img src= ""  id= "img" ></div>//js<script type= "Text/javascript"  src= " Jquery.webcam.min.js "></script><script type=" Text/javascript ">    $ ( function  ()  {        var w = 320, h  = 240;        var pos = 0, ctx =  null, saveCB, image = [];        var  Canvas = document.createelement ("Canvas");         Canvas.setattribute (' width ',  w);         canvas.setattribute (' Height ',  h);         console.log (Canvas.todataurl);         if  (Canvas.todataurl)  {             ctx = Canvas.getcontext ("2d");             image =  ctx.getimagedata (0, 0, w, h);             savecb = function (data)  {                 var col = data.split (";");                 var img  = image;                 for (var i = 0; i < w; i++)  {                     var tmp =  parseint (Col[i]);                     img.data[pos + 0] =  (tmp >> 16)  & 0xff;                     img.data[pos + 1 ] =  (tmp >> 8)  & 0xff;                     img.data[pos + 2] =  tmp & 0xff;                     img.data[pos + 3] = 0xff;                     pos+=  4;                }                 if  (POS  >= 4 * w&NBSP;*&NBSP;H)  {                     ctx.putimagedata (img, 0, 0);                     $.post ("${ctx}/common/ Webcam/uploadphoto ", {type: " Data ",  image: canvas.todataurl (" Image/png ")}, function ( msg) {                         console.log (msg);                         pos =  0;                         $ ("#img"). attr ("src",  "${ctx}/" +msg);                     });                 }             };        } else {             savecb = function (data)  {                 image.push (data);                 pos+= 4 * w ;                if  (POS &NBSP;&GT;=&NBSP;4&NBSP;*&NBSP;W&NBSP;*&NBSP;H)  {                     $.post ("${ctx}/common/webcam/uploadphoto",  {type:  "PixeL ",  image: image.join (' | ')}, function (msg) {                         console.log ( msg);                         pos = 0;                         $ ("#img"). attr ("src",  "${ctx}/" +msg);                     });                 }            } ;         }        $ ("#webcam") . Webcam ({&NBSP;&NBSP;&NBSP;&NBsp;        width: w,             height: h,             mode:  "Callback",             swffile:  "${ctxstatic }/jquery-plugin/jscam_canvas_only.swf",             onSave: saveCB,             onCapture: function  ()  {                 webcam.save ();             },            debug:  function  (type, string)  {                 consOle.log (type +  ": "  + string);             }        });     });     //photo     function savephoto () {         webcam.capture ();    }</script>

Java Back-end code:

/** *  function Description: Take photos and upload pictures  * *  @since  2016/5/24 */@RequestMapping (value =   "/uploadphoto") Public void uploadphoto (httpservletrequest req, httpservletresponse  RESP)  throws BusinessException {    String basePath =  "Upload/"  + dateutils.getdate ("YyyyMMdd")  +  "/";    string  Filepath = req.getsession (). Getservletcontext (). Getrealpath ("/")  + basePath;     string filename = dateutils.getdate ("Yyyymmddhhmmss")  +  ". png";     //default parameters with type parameters such as: data:image/png;base64,    string imgstr =  req.getparameter ("image");    if  (NULL != IMGSTR)  {         imgstr = imgstr.substring (Imgstr.indexof (",")  + 1);     }  &Nbsp; boolean flag = generateimage (Imgstr, filepath, filename);     String result =  "";    if  (flag)  {         result = basePath + fileName;    }     this.writejson (RESULT, RESP);} /** *  function Description: Base64 string conversion to picture  * *  @since  2016/5/24 */public boolean  Generateimage (String imgstr, string filepath, string filename)  {     try {        if  (imgstr == null)   {            return false;         }        base64decoder decoder  = new base64decoder ();        &nbsP;//base64 Decoding         byte[] b = decoder.decodebuffer ( IMGSTR);         //If the directory does not exist, create a          file file = new file (FilePath);         if  (!file.exists ())  {             File.mkdirs ();        }         //Generating Images         OutputStream out = new  FileOutputStream (Filepath + filename);         out.write (b);         out.flush ();         Out.close ();        return true;    }  catch  (exception e)  {         logger.error ("Generate Picture exception: {}",  e.getmessage ());         return false;    }}

Reference article:

http://blog.csdn.net/hfhwfw/article/details/5544408

http://www.xarg.org/project/jquery-webcam-plugin/

This article is from the "Pig Flying" blog, please be sure to keep this source http://jiyanle.blog.51cto.com/6932197/1782625

jquery webcam + Java service Photo Upload instance