Question

I am using jquery webcam plugin and when i take the picture its not showing up in the canvas. I would like to know if i have to upload the image to the server first before it can be displayed on the canvas or will it be shown once its snapped.

Code:

    $(document).ready(function(){


        $("#camera").webcam({
                width: 315,
                height: 240,
                useMicrophone: false,
                mode: "callback",
                swffile: "resources/swf/jscam_canvas_only.swf", 


                onLoad: function() {

                    var cams = webcam.getCameraList();
                    for(var i in cams) {
                        jQuery("#cams").append("<li>" + cams[i] + "</li>");
                    }
                },

                debug: function (type, string) {
                    $("#status").html(type + ": " + string);
                },

                onCapture: function () {

                    jQuery("#flash").css("display", "block");
                    jQuery("#flash").fadeOut("fast", function () {
                    jQuery("#flash").css("opacity", 1);

                    webcam.snap();

                    });

                    webcam.snap();
                },

                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);
                        pos = 0;
                    }
                }





        }); 
});

    <label id="status"></label>                             
                        <div id="camera"></div>
                        <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div>
                         <a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a>

Answer 1

This is what i did and it works very well now. Now it just to figure how to upload to the server in java:

Code

<script type="text/javascript">

    var pos = 0, ctx = null, saveCB, image = [];
    var canvas = document.createElement('canvas');
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);
    ctx = canvas.getContext('2d');
    image = ctx.getImageData(0, 0, 320, 240);

    var saveCB = 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);
            foto = canvas.toDataURL("image/png");
            pos = 0;
        }
    };


    $(document).ready(function(){


        $("#camera").webcam({
                width: 315,
                height: 240,
                useMicrophone: false,
                mode: "callback",
                swffile: "resources/swf/jscam_canvas_only.swf",
                quality:85,

                onSave: saveCB,
                onCapture: function () {
                    webcam.save();
                }



        }); 



        $('#upload').click(function () {
            webcam.capture();
            return false;
        });


        window.addEventListener("load", function() {
            var canvas = document.getElementById("canvas");

            if (canvas.getContext) {
                ctx = document.getElementById("canvas").getContext("2d");
                ctx.clearRect(0, 0, 320, 240);


                image = ctx.getImageData(0, 0, 320, 240);
            }

            }, false);

});

    <label id="status"></label>                             
                        <div id="camera"></div>
                        <div><p><canvas id="canvas" height="240" width="320"></canvas></p></div>
                        <input  id="upload" type="button" value="Take Photo">