Specifically for Safari, when 'take a photo or video' is used for my 'input=file accept='image/*'', it will crash the browser/web-page sometimes (most times). This is a huge problem due to the fact that there are 7 image inputs that need to be filled. It is very frustrating for users to have to keep trying over and over again. Disabling photo-taking for file inputs is not an option.
I've tried resizing the image using canvas and turning that into a blob. The weirdest thing is that it will work 100% for front-facing every time, but the rear facing camera is intermittent. Most of the users use rear facing cameras. The only conclusion I can make is that it's a problem with IOS 8.3 (or period).
Works perfectly on Chrome for IOS, Android, and even Windows Phone. Are there any work-arounds for this at all?
- Updated with Safari Crash Log 6/5/2015
Code Sample (using ng-file-upload)
JADE
label.upload(id='img_upload_{{$index}}' accept='image/*;capture=camera', ngf-select, ng-model='r.file', ngf-change='initPhoto($files, $event, $index)') Click to Select Upload
JAVASCRIPT
$scope.initPhoto = function(files, event, index){
if(files.length){
var file = (event.srcElement || event.target).files[0];
var options = {canvas: true};
loadImage.parseMetaData(file, function (data) {
//DOES IT CONTAIN EXIF ORIENTATION DATA?
if (data.exif) {
options.orientation = data.exif.get('Orientation');
}
//LOAD IMAGE INTO $myPreview and $myFile
loadImage(file, function (img) {
img = resizePhoto(img);
file = {};
img.toBlob(function (blob) {
$scope.$apply(function () {
$scope.photoRecords[index].photo = blob;
$scope.photoRecords[index].file = img.toDataURL();
});
}, 'image/jpeg');
}, options);
});
}
};
function resizePhoto(img){
var MAX_WIDTH = 1632;
var MAX_HEIGHT = 1224;
var width = img.width;
var height = img.height;
var canvas = document.createElement('canvas');
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');
ctx.drawImage(img, 0, 0, width, height);
return canvas;
}
SAFARI CRASH LOG
Incident Identifier: 429DC524-8B3E-4E0F-9A02-A119239A9D17
CrashReporter Key: 0f890a17d3c01d0dc653fa891ba132f8030c9a06
Hardware Model: iPhone7,1
Process: MobileSafari [14647]
Path: /Applications/MobileSafari.app/MobileSafari
Identifier: com.apple.mobilesafari
Version: 600.1.4 (8.0)
Code Type: ARM-64 (Native)
Parent Process: launchd [1]
Date/Time: 2015-06-05 11:11:14.449 -0500
Launch Time: 2015-06-05 10:49:45.740 -0500
OS Version: iOS 8.3 (12F70)
Report Version: 105
Exception Type: EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x0000000000000028
Triggered by Thread: 0