Jquery Webcam Plugin

Question

jQuery 웹캠을 사용하여 클라이언트의 사진을 캡처하고 있습니다. 양식을 제출할 때 서버에 보내야합니다 (정보가있는 양식이며 사진을 첨부해야합니다).

blob과 같은 데이터베이스에 base64로 인코딩 된 이미지를 저장하는 부분을 제외한 모든 작업이 있습니다.

<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에서 내가 가진 :

다음

<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> 

나는이 다음에, 고객이를 기입하는 것을 단지 정상적인 형태를 갖는다 : 여기

는 내가 지금까지 무엇을 가지고 :

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

Answer 1

PHP로 작성된 $image=$_POST['save_image']; :). 감사합니다.