Загрузка фотографий IOS6 и Safari - Файловый API + Canvas + jQuery Ajax Загрузка и изменение размера файлов асинхронно
IOS6 был выпущен, и я тестировал загрузку фотографий.
Это работает хорошо, но с большими изображениями через 3G это МЕДЛЕННО, как и ожидалось.
Благодаря File API и Canvas можно изменять размеры изображений с помощью JavaScript. Я надеюсь, что, если я изменю размеры изображений, прежде чем я попытаюсь загрузить их, они будут загружаться быстрее, что обеспечивает быстрый пользовательский опыт. Поскольку процессоры смартфонов улучшаются в геометрической прогрессии быстрее, чем скорость сети, я считаю, что это решение является победителем.
Николас предложил отличное решение для изменения размера изображения:
Размер изображения перед загрузкой
Однако мне тяжело реализовать его с помощью jQuery's Ajax. Любой совет или помощь приветствуются, так как этот код, вероятно, будет чрезвычайно полезен для разработки мобильных веб-приложений после 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);