Transfert de photos IOS6 et Safari - API de fichiers + Canvas + jQuery Ajax Téléchargement et redimensionnement de fichiers de manière asynchrone
IOS6 a été libéré et je l'ai testé chargement de la photo.
Il fonctionne bien, mais avec de grandes images sur les réseaux 3G, il est LENT comme prévu.
Grâce aux Fichiers de l'API et de la Toile, il est possible de redimensionner les images à l'aide de JavaScript. J'espère que si je redimensionner les images avant d'essayer de télécharger une d'elles, téléchargement plus vite - se prêtant à une rapide expérience de l'utilisateur. Avec le smartphone processeurs d'améliorer de façon exponentielle plus rapide que les vitesses de réseau, je crois que cette solution est un gagnant.
Nicolas a offert une excellente solution pour le redimensionnement d'image:
Image redimensionner avant de les télécharger
Cependant, je vais avoir le temps le plus difficile de la mettre en œuvre avec jQuery Ajax. Des conseils ou de l'aide est très appréciée, que ce code sera probablement extrêmement utiles pour l'application web mobile de développement post-IOS6.
var fileType = file.type,
reader = new FileReader();
reader.onloadend = function () {
var image = new Image();
image.src = reader.result;
image.onload = function () {
//Detect image size
var maxWidth = 960,
maxHeight = 960,
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
} else {
if (imageHeight > maxHeight) {
imageWidth *= maxHeight / imageHeight;
imageHeight = maxHeight;
}
}
//Create canvas with new image
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
//The resized file ready for upload
var finalFile = canvas.toDataURL(fileType);
if (formdata) {
formdata.append("images[]", finalFile);
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
dataType: 'json',
processData: false,
contentType: false,
success: function (res) {
//successful image upload
}
});
}
}
}
reader.readAsDataURL(file);
source d'informationauteur TaylorMac
Vous devez vous connecter pour publier un commentaire.
J'ai juste développé un plugin jQuery pour le côté client toile de redimensionnement d'image.
Il gère également la orientation et la iOS6 écrasé image question.
Vous pouvez essayer:
http://gokercebeci.com/dev/canvasresize
Utilisation:
J'ai travaillé avec la fonction de téléchargement depuis la seconde iOS6 version bêta. Le code suivant fonctionne pour moi:
Mis cela dans la tête de votre page HTML -
Voici le code HTML -
Voici le PHP -
Le seul problème que j'ai lutté avec est d'obtenir des images à charger à partir de l'appareil photo sans être tourné de 90 degrés.
Espère que cette aide, laissez-moi savoir si vous avez des problèmes avec le code (c'est mon premier post).
Donné que nous avons affaire avec de grandes images et des problèmes de mémoire sur un navigateur mobile, je voulais voir si un peu de poids à trouver une solution qui évite de créer un double de la toile et d'effectuer d'autres opérations liées aux images juste pour la détection et le redimensionnement.
Il semble que si le navigateur Safari Mobile ne verticalement squash une image trop grande, le ratio de la façon dont beaucoup il ne, reste le même.
Donc, dès maintenant, avant que j'ai même rendu de l'image sur la toile, j'utilise très rapide en règle générale en vertu de laquelle j'ai simplement vérifier si le navigateur est un mobile iDevice
navigator.userAgent.match(/(iPod|iPhone|iPad)/)
... ET l'image de la hauteur ou la largeur est supérieure à 2000 pix, dans ce cas, je sais que ça va être écrasé.
Dans ce cas, en
canvasContext.drawImage()
- je spécifier la hauteur de l'image à 4x plus grand que ce qu'elle devrait normalement pour un redimensionnement d'image de l'objectif. Basé sur ce que j'ai vu, Mobile Safari courges de l'image par un facteur de 4.PUIS je le rendu de l'image, et il rend non faussée la première fois, l'écrasement d'un pré-étiré image de ce qui devient alors normal X:Y proportion. Sans les éléments de canevas ou de contextes ou rendus de test ou de pixel itérations qu'un 100% solution mentionnée ci-dessus, utilise.
Je suis sûr il peut y avoir certains cas limites, et la taille de l'image peut ne pas être exacte, mais pour mon application, j'ai voulu une solution RAPIDE.