Capture image from mobile camera and preview before upload

Question

Would anyone be able to point me in the right direction, I'm trying to write a small application for a web-site, where by the user can choose either an image, or choose to capture an image with their phone camera.

We can then display (preview) the image to them, and they can confirm it and carry on, or restart and take the image again.

I've found a few ways to do this using jQuery, which seemed to work well on a computer, However on a phone (tested using a Samsung S5 running the latest chrome) i frequently receive error messages saying that the previous operation could not be completed due to low memory.

Here is an example of the current code i'm using, this is stripped down somewhat just to show a basic example, but you can see the method doesn't seem very efficient:

$(function() {
$("#prev-img-file").on("change", function()
{
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test( files[0].type)){ // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file

        reader.onloadend = function(){ // set image data as background of div
            $(".up-pic-preview").css("background-image", "url("+this.result+")");

        }
    }
});
});

http://jsfiddle.net/fish_r/vnu7661c/

Would anyone know of anything that doesn't hog as much resources?

Thanks!

Answer 1

Try WebcamJS .

One of the demo pages - test it on my android 4.4 phone minute ago - works fine :-)

This library allows you to:

• display preview;
• capture image;
• upload captured image to server;
• fallback to flash if HTML5 getUserMedia() is not supported;