Jquery攝像頭插件當照片拍攝時沒有顯示圖片

Question

我正在使用jquery攝像頭插件當我拍攝照片時，它沒有出現在畫布上。我想知道是否必須首先將圖像上載到服務器，然後才能將其顯示在畫布上，或者一旦其被捕捉就會顯示。

代碼：

$(document).ready(function(){ 


     $("#camera").webcam({ 
       width: 315, 
       height: 240, 
       useMicrophone: false, 
       mode: "callback", 
       swffile: "resources/swf/jscam_canvas_only.swf", 


       onLoad: function() { 

        var cams = webcam.getCameraList(); 
        for(var i in cams) { 
         jQuery("#cams").append("<li>" + cams[i] + "</li>"); 
        } 
       }, 

       debug: function (type, string) { 
        $("#status").html(type + ": " + string); 
       }, 

       onCapture: function() { 

        jQuery("#flash").css("display", "block"); 
        jQuery("#flash").fadeOut("fast", function() { 
        jQuery("#flash").css("opacity", 1); 

        webcam.snap(); 

        }); 

        webcam.snap(); 
       }, 

       onSave: function(data) { 

        var col = data.split(";"); 
        var img = image; 

        for(var i = 0; i < 320; 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 * 320 * 240) { 
         ctx.putImageData(img, 0, 0); 
         pos = 0; 
        } 
       } 





     }); 
}); 

    <label id="status"></label>        
         <div id="camera"></div> 
         <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div> 
         <a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a> 

Answer 1

這是我做的，現在工作得很好。現在，它只是爲了弄清楚如何上傳到服務器在Java：

代碼

<script type="text/javascript"> 

    var pos = 0, ctx = null, saveCB, image = []; 
    var canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', 320); 
    canvas.setAttribute('height', 240); 
    ctx = canvas.getContext('2d'); 
    image = ctx.getImageData(0, 0, 320, 240); 

    var saveCB = function (data) { 
     var col = data.split(';'); 
     var img = image; 
     for (var i = 0; i < 320; 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 * 320 * 240) { 
      ctx.putImageData(img, 0, 0); 
      foto = canvas.toDataURL("image/png"); 
      pos = 0; 
     } 
    }; 


    $(document).ready(function(){ 


     $("#camera").webcam({ 
       width: 315, 
       height: 240, 
       useMicrophone: false, 
       mode: "callback", 
       swffile: "resources/swf/jscam_canvas_only.swf", 
       quality:85, 

       onSave: saveCB, 
       onCapture: function() { 
        webcam.save(); 
       } 



     }); 



     $('#upload').click(function() { 
      webcam.capture(); 
      return false; 
     }); 


     window.addEventListener("load", function() { 
      var canvas = document.getElementById("canvas"); 

      if (canvas.getContext) { 
       ctx = document.getElementById("canvas").getContext("2d"); 
       ctx.clearRect(0, 0, 320, 240); 


       image = ctx.getImageData(0, 0, 320, 240); 
      } 

      }, false); 

}); 

    <label id="status"></label>        
         <div id="camera"></div> 
         <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div> 
         <input id="upload" type="button" value="Take Photo">