Help with Jquery webcam

[falcon758]

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:

 

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

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

 

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

 

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

[trq]

So where is the relevant code your having issue with?

[falcon758]

var save_image = canvas.toDataURL("image/png");
            save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, "");  
            $('input[name=save_image]').val(save_image);

 

The above code send the encrypted base64 encoded url to the php, and in php i'm trying to read that code, and store that image png as a blob, i already tried several approaches but without any luck.

 

I tried to decode the url and send to mysql directly, tried convert to binary code,and stills the same problem...it goes to mysql, but is not reconigzed like an image blob

[scootstah]

Did you check that the data received by PHP matches the data that you sent?

[falcon758]

yes, i decoded the content and its an png image like the one i sent

[falcon758]

Worked with just 

$image=$_POST['save_image'];

in php:).

Thanks