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!!
