Safari needs the img.onload event before actually working on the img

This commit is contained in:
Emmanuel ROHEE 2014-08-22 10:15:15 +02:00
parent be2f948da5
commit c8d0c4762d
2 changed files with 39 additions and 27 deletions

View File

@ -82,6 +82,7 @@ angular.module('mFileUpload', ['matrixService', 'mUtilities'])
// First, get the image size // First, get the image size
mUtilities.getImageSize(imageFile).then( mUtilities.getImageSize(imageFile).then(
function(size) { function(size) {
console.log("image size: " + JSON.stringify(size));
// The final operation: send imageFile // The final operation: send imageFile
var uploadImage = function() { var uploadImage = function() {

View File

@ -38,10 +38,15 @@ angular.module('mUtilities', [])
img.src = e.target.result; img.src = e.target.result;
// Once ready, returns its size // Once ready, returns its size
deferred.resolve({ img.onload = function() {
width: img.width, deferred.resolve({
height: img.height width: img.width,
}); height: img.height
});
};
img.onerror = function(e) {
deferred.reject(e);
};
}; };
reader.onerror = function(e) { reader.onerror = function(e) {
deferred.reject(e); deferred.reject(e);
@ -71,33 +76,39 @@ angular.module('mUtilities', [])
reader.onload = function(e) { reader.onload = function(e) {
img.src = e.target.result; img.src = e.target.result;
// Once ready, returns its size
img.onload = function() {
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var ctx = canvas.getContext("2d"); var MAX_WIDTH = maxSize;
ctx.drawImage(img, 0, 0); var MAX_HEIGHT = maxSize;
var width = img.width;
var height = img.height;
var MAX_WIDTH = maxSize; if (width > height) {
var MAX_HEIGHT = maxSize; if (width > MAX_WIDTH) {
var width = img.width; height *= MAX_WIDTH / width;
var height = img.height; width = MAX_WIDTH;
}
if (width > height) { } else {
if (width > MAX_WIDTH) { if (height > MAX_HEIGHT) {
height *= MAX_WIDTH / width; width *= MAX_HEIGHT / height;
width = MAX_WIDTH; height = MAX_HEIGHT;
}
} }
} else { canvas.width = width;
if (height > MAX_HEIGHT) { canvas.height = height;
width *= MAX_HEIGHT / height; var ctx = canvas.getContext("2d");
height = MAX_HEIGHT; ctx.drawImage(img, 0, 0, width, height);
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL("image/jpeg", 0.7); var dataUrl = canvas.toDataURL("image/jpeg", 0.7);
deferred.resolve(self.dataURItoBlob(dataUrl)); deferred.resolve(self.dataURItoBlob(dataUrl));
};
img.onerror = function(e) {
deferred.reject(e);
};
}; };
reader.onerror = function(e) { reader.onerror = function(e) {
deferred.reject(e); deferred.reject(e);