PHP - Help With Jquery Webcam

I'm using jQuery webcam to capture a photo of the client. I need to send it to the server just when the form is submitted (It's a form with information, and I need to have the photo attached to it).

I have everything working except the part of saving the image encoded with base64 to the database like blob.

Here is what I have so far:

Code: [Select]
    <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;
        }
    },
   
    onCaptu 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>
Then I have just a normal form that the customer has to fill it in, followed by this:

Code: [Select]
    <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>
in php i have:

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