Jquery摄像头插件

Question

我使用jQuery摄像头捕获客户端的照片。我需要在表单提交时将其发送到服务器（这是一个包含信息的表单，我需要将照片附加到它）。

我有一切工作，除了保存用base64编码的图像像blob数据库的一部分。

这是我到目前为止有：

<script type="text/javascript"> 
var pos = 0; 
var ctx = null; 
var cam = null; 
var image = null; 

jQuery("#webcam").webcam({ 

    width: 320, 
    height: 240, 
    mode: "callback", 
    swffile: "/../../js/jscam_canvas_only.swf", 

    onTick: function(remain) { 

     if (0 == remain) { 
      jQuery("#status").text("Sorria!"); 
     } else { 
      jQuery("#status").text(remain + " segundo(s) restante(s)..."); 
     } 
    }, 

    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); 
     var canvas = document.getElementById("canvas"); 
     var save_image = canvas.toDataURL("image/png"); 
     save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, ""); 
     $('input[name=save_image]').val(save_image); 
     pos = 0; 
    } 
}, 

    onCapture: function() { 

     jQuery("#flash").css("display", "block"); 
     jQuery("#flash").fadeOut(100, function() { 
      jQuery("#flash").css("opacity", 1); 
     }); 
       jQuery("#canvas").show(); 
       webcam.save(); 
    }, 

    onLoad: function() { 

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

function getPageSize() { 

    var xScroll, yScroll; 

    if (window.innerHeight && window.scrollMaxY) { 
     xScroll = window.innerWidth + window.scrollMaxX; 
     yScroll = window.innerHeight + window.scrollMaxY; 
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
     xScroll = document.body.scrollWidth; 
     yScroll = document.body.scrollHeight; 
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
     xScroll = document.body.offsetWidth; 
     yScroll = document.body.offsetHeight; 
    } 

    var windowWidth, windowHeight; 

    if (self.innerHeight) { // all except Explorer 
     if(document.documentElement.clientWidth){ 
      windowWidth = document.documentElement.clientWidth; 
     } else { 
      windowWidth = self.innerWidth; 
     } 
     windowHeight = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
     windowWidth = document.documentElement.clientWidth; 
     windowHeight = document.documentElement.clientHeight; 
    } else if (document.body) { // other Explorers 
     windowWidth = document.body.clientWidth; 
     windowHeight = document.body.clientHeight; 
    } 

    // for small pages with total height less then height of the viewport 
    if(yScroll < windowHeight){ 
     pageHeight = windowHeight; 
    } else { 
     pageHeight = yScroll; 
    } 

    // for small pages with total width less then width of the viewport 
    if(xScroll < windowWidth){ 
     pageWidth = xScroll; 
    } else { 
     pageWidth = windowWidth; 
    } 

    return [pageWidth, pageHeight]; 
} 

window.addEventListener("load", function() { 

    jQuery("body").append("<div id=\"flash\"></div>"); 

    var canvas = document.getElementById("canvas"); 

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

     var img = new Image(); 
     img.onload = function() { 
      ctx.drawImage(img, 320, 240); 
     } 
     image = ctx.getImageData(0, 0, 320, 240); 
    } 
    var pageSize = getPageSize(); 
    jQuery("#flash").css({ height: pageSize[1] + "px" }); 

}, false); 

window.addEventListener("resize", function() { 

    var pageSize = getPageSize(); 
    jQuery("#flash").css({ height: pageSize[1] + "px" }); 

}, false); 
</script> 

然后我只是一个普通的形式，客户必须填写它，其次是这样的：

<div id="webcam"> 
</div> 
<p style="width:250px;text-align:center; "><input type="button" value="Tirar Fotografia" onclick="webcam.capture(3);void(0);"/></p></td><td><p><canvas id="canvas" height="200" width="200"></canvas></p> 

在PHP我有：

$image=file_get_contents(base64_decode($_POST['save_image'])); 

Answer 1

在PHP中只用$image=$_POST['save_image'];工作:)。 谢谢