IOS6 e Safari Photo Upload - API de arquivo + Canvas + jQuery Ajax Fazendo upload e redimensionando arquivos de forma assíncrona
O IOS6 foi lançado e estou testando o upload de fotos.
Funciona bem, mas com imagens maiores em 3G é LENTO como esperado.
Graças à API de arquivos e ao Canvas, é possível redimensionar imagens usando JavaScript. Espero que, se eu redimensionar as imagens antes de tentar enviá-las, elas serão enviadas com mais rapidez - permitindo uma rápida experiência do usuário. Com os processadores para smartphones melhorando exponencialmente mais rápido que as velocidades da rede, acredito que esta solução seja uma vencedora.
Nicolas ofereceu uma excelente solução para redimensionamento de imagens:
Redimensionamento de imagem antes do upload
No entanto, estou tendo mais dificuldade em implementá-lo com o Ajax do jQuery. Qualquer conselho ou ajuda é apreciado, já que este código provavelmente será extremamente útil para o desenvolvimento de aplicativos da web para dispositivos móveis pós-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);