从移动相机拍摄图像并在上传前预览

有人能为我指明正确的方向吗？我正在尝试为网站编写一个小型应用程序，用户可以在其中选择图像，也可以选择用手机摄像头拍摄图像。

然后我们可以向他们显示（预览）图像，他们可以确认并继续，或者重新启动并再次拍摄图像。

我已经找到了一些使用jQuery的方法，它在计算机上似乎运行良好。然而，在手机上（使用运行最新chrome的三星S5进行测试），我经常收到错误消息，说由于内存不足，无法完成之前的操作。

下面是我正在使用的当前代码的一个例子，这在一定程度上只是为了显示一个基本的例子，但你可以看到这个方法似乎不是很有效：

$(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/

有人知道有什么东西不会占用那么多资源吗？

谢谢！