Website crashes when taking picture with camera

I've got a simple page that allows you to take a picture with your phone and then upload it to the server.

To achieve that, I'm using HTML5's input as file, so when I click (or tap on) Choose File two options are displayed:

1. Use the phone's camera (I'm using an iPhone with iOS8)


2. Select a picture from the library.

If I select the picture from the library everything works just fine, as for now I'm only displaying it on screen, but if I use the camera, after taking the picture the page crashes. I haven't been able to debug because it never hits my breakpoints since the debugging session crashes as well.

Here's the code. Any help will be highly appreciated.

<!--Seg:openPage-->
<script>
function resizeImg(img, canvas, ctx){

    var MAX_WIDTH = 500;
    var MAX_HEIGHT = 300;
    var width = img.width;
    var height = img.height;

    alert(width + " " + height);

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }

    canvas.width = width;
    canvas.height = height;
    //var ctx = canvas.getContext("2d");

    //var dataURL = canvas.toDataURL(img, 0.5);
    //img.src = dataURL; 

    ctx.drawImage(img, 0, 0, width, height);
}


function drawOnCanvas(file) {

      var reader = new FileReader();

      reader.onload = function (e) {

        var dataURL = e.target.result;
        var c = document.querySelector('canvas');
        var ctx = c.getContext('2d');
        var img = new Image();

        img.src = dataURL;
        //****img.onload = function() {
        //c.width = 200; //img.width;
        //c.height = 200; //img.height;
        if (img.complete) {
            resizeImg(img, c, ctx);
            //ctx.drawImage(img, 0, 0);
        } else {
            img.onload = function () {
                resizeImg(img, c, ctx);
                //ctx.drawImage(img, 0, 0);
            };
        }
        //ctx.drawImage(img, 0, 0);

        //****};
        //****img.src = dataURL;
    };

    reader.readAsDataURL(file); 
    }


function upload(file){

    var encodedB64 = window.btoa(file);
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend=function(){
        if(file){
            //reader.readAsDataURL(file);
            console.log(reader);
            //alert(reader.result);
            $('.output').val(reader.result);
        }

        submit_form('f','GO');
    }
}


$(document).ready(function(){

    var input = document.querySelector('input[type=file]');

    input.onchange = function () {
      var file = input.files[0];

      //upload(file);
      drawOnCanvas(file);   
      //displayAsImage(file); 
    };

});
</script>

<style>
/**
#canvas-container {
    width: 100%;
    height: 100%;
}

#canvas-container #myCanvas{
    width: 100%;
}**/
</style>
<div class="container" style="padding-top: 10px;">
<div id="page_content">
<form name="f" method="POST" action="@&PGM " class="sigPad">
    <input type="hidden" name="output" class="output">

    <!--Add file input-->
    <p>Choose a picture from your device or capture one with your camera now:</p>
    <input type="file" id="picManager" accept="image/*" capture="camera">

    <!--Add canvas-->
    <p>Photo:</p>
    <div id="canvas-container">
        <canvas id="myCanvas"></canvas>
    </div>

    <button type="submit" class="btn btn-primary">View</button>



</form>
</div>
</div>
<!--End:openPage-->