I trying to build a web app using html5 which has a user profile page and I am having an issue with input type="file" when testing it on an Android browser. When selected it gives me the option to open camera or gallery, when an file is selected, it populates the file field, but I can't get the file to populate the canvas. This is working perfectly on ios and firefox, chrome on Android.

Here is the html code:

 <canvas id="canvas" width="160" height="120" style="border:1px solid #000000;"></canvas>
    <input type="file" capture="camera" accept="image/*" id="takePictureField" onchange="picChange(event)">

And the JavaScript:

function picChange(evt) { var fileInput = evt.target.files;

if(fileInput.length>0)
{
    var windowURL = window.URL || window.webkitURL;
    var picURL = windowURL.createObjectURL(fileInput[0]);
    var photoCanvas = document.getElementById("canvas");
    var ctx = photoCanvas.getContext("2d");
    var photo = new Image();

    photo.onload = function()
    {
        ctx.drawImage(photo, 0, 0, 160, 120);
    };
photo.src = picURL;
windowURL.revokeObjectURL(picURL);
}
}

Can anyone see what I'm doing wrong?? Do I need to add something to the windowURL so that Android can recognize it?? Any help would be greatly appreciated as this is really starting to bug me!!

Try this.

function picChange(evt) {

  var fileInput = evt.target.files;

  if(fileInput.length>0)
  {
      var windowURL = window.URL || window.webkitURL;
      var picURL = windowURL.createObjectURL(fileInput[0]);
      var photoCanvas = document.getElementById("canvas");
      var ctx = photoCanvas.getContext("2d");
      var photo = new Image();

      photo.onload = function()
      {
          ctx.drawImage(photo, 0, 0, 160, 120);
          windowURL.revokeObjectURL(picURL); // moved this
      };
    photo.src = picURL;
  }
}

Thank, updating the version of android seemed to do the trick!