Jquery Webcam Plugin
<p>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).</p>

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

<p>Here is what I have so far:</p>

<pre><code>&lt;script type="text/javascript"&gt;
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 &lt; 320; i++) {
        var tmp = parseInt(col[i]);
        img.data[pos + 0] = (tmp &gt;&gt; 16) &amp; 0xff;
        img.data[pos + 1] = (tmp &gt;&gt; 8) &amp; 0xff;
        img.data[pos + 2] = tmp &amp; 0xff;
        img.data[pos + 3] = 0xff;
        pos+= 4;
    }

    if (pos &gt;= 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("&lt;li&gt;" + cams[i] + "&lt;/li&gt;");
        }
                jQuery("#canvas").hide();
    }
});

function getPageSize() {

    var xScroll, yScroll;

    if (window.innerHeight &amp;&amp; window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight &gt; 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 &amp;&amp; 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 &lt; windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }

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

    return [pageWidth, pageHeight];
}

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

    jQuery("body").append("&lt;div id=\"flash\"&gt;&lt;/div&gt;");

    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);
&lt;/script&gt;
</code></pre>

<p>Then I have just a normal form that the customer has to fill it in, followed by this:</p>

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

<p>in php i have:</p>

<pre><code>  $image=file_get_contents(base64_decode($_POST['save_image']));
</code></pre>
