#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    9
    Rep Power
    0

    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:
      <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>
    Then I have just a normal form that the customer has to fill it in, followed by this:
    Code:
        <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:
          $image=file_get_contents(base64_decode($_POST['save_image']));
  2. #2
  3. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,661
    Rep Power
    4124
    I'm not that familiar with what the canvas element can output wrt web forms.

    Firstly I would check with a live headers plugin that the data is actually getting sent to the server

    Then in php there is an alternative to $_POST, which is

    PHP Code:
    //
    $fp fopen("php://input","r");

    if(!
    $fp) {
         while(!
    feof($fp)) {
              
    $c.=fgets($fp,1024);
         }

    Last edited by Northie; March 23rd, 2012 at 11:46 AM.
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    PDO vs mysql_* functions: Find a Migration Guide Here

    [ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    9
    Rep Power
    0

    Worked


    Worked with just
    Code:
    $image=$_POST['save_image'];
    in php.
    Thanks

    Originally Posted by Northie
    I'm not that familiar with what the canvas element can output wrt web forms.

    Firstly I would check with a live headers plugin that the data is actually getting sent to the server

    Then in php there is an alternative to $_POST, which is

    PHP Code:
    //
    $fp fopen("php://input","r");

    if(!
    $fp) {
         while(!
    feof($fp)) {
              
    $c.=fgets($fp,1024);
         }

  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    1
    Rep Power
    0

    @falcon758


    Originally Posted by falcon758
    Worked with just
    Code:
    $image=$_POST['save_image'];
    in php.
    Thanks
    Please i'm about working on the same project you just described and i'll be glad if you can share the entire code with me.

    I will make sure to give you credits.

    Thanks
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    9
    Rep Power
    0

    Smile


    Originally Posted by stevemine1
    Please i'm about working on the same project you just described and i'll be glad if you can share the entire code with me.

    I will make sure to give you credits.

    Thanks
    Sure, you need to download the code to the webcam from: http://www.xarg.org/project/jquery-webcam-plugin/.
    The code is the following:

    Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
                    <script type="text/javascript" src="/../../js/jquery.webcam.js"></script>
                    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
                    <table width="100%" class="TF">
    
                        <tr><th colspan="2">Create User</th><td rowspan="9"><table cellpadding="3"><tr><td><p id="status" style="height:12px; color:#c00;font-weight:bold;"></p><div id="webcam">
                    </div>
                    <p style="width:250px;text-align:center; "><input type="button" value="Take Photo" onclick="webcam.capture(3);void(0);"/></p></td><td><p><canvas id="canvas" height="240" width="320"></canvas></p></td></tr></table></td></tr>
                               <tr><td></td><td><input type="submit" name="submit" /></td></tr>           
                    </table>
                    </form>
                    <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("Smile!");
                                    } else {
                                            jQuery("#status").text(remain + " second(s) remaining...");
                                    }
                            },
    
                            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>
                    <?php
                    }
                    if(isset($_POST['submit'])) //check if it was submitted
                    {
    
                        
                      $image=$_POST['save_image']; //assing post to variable
                      $image=base64_decode(str_replace('data:image/png;base64,', '', $image)); // decode string with base64 and replace desnecessary header to write to file
                      file_put_contents("temp.png", $image);//save picture to disk
    }
    ?>
    You can insert picture in database by doing and mysql_real_escape_string to "$image" and writting it to a blob field.

    Enjoy

IMN logo majestic logo threadwatch logo seochat tools logo