Изменение размера перед загрузкой без предварительного просмотра javascript

Question

Я хочу избежать загрузки больших/тяжелых файлов изображений.

Я предпочитаю библиотеку HTML5 FileAPI для этой работы.

Добавлена ​​вся другая функциональность (загрузка, переупорядочение и т. Д.), Поэтому мне нужна только функция изменения размера изображения.

СЛУЧАЙ:

На странице есть вход для нескольких файлов.

При вводе изменений событий (при добавлении файлов) измените размер введенных изображений/файлов и добавьте их в форму FormData(), а затем отправьте скрипт FormData() в PHP через ajax.

Пример:

$('input').on('change',function(){ 
    var formData = resizeImages(this.files[0]); 
    uploadResizedImages(formData); 
}); 

function resizeImages(files){ 
    formData = new FormData(); 

    //For each image, resize it and append to formData 
    //resize file part missing.... 
    formData.append('files[]',this);//Appending to formData (this = currently iterated file) 

    return formData;//Return the formData with resized images 
} 

Кто-нибудь?

Благодаря

Answer 1

По моему опыту, вы не можете управлять изображением на стороне клиента затем загрузить манипулируют изображение в такт с помощью ввода имени файла в форме.

То, как я делал то, что вы пытаетесь сделать в прошлом, включает в себя несколько шагов.

1. Выберите изображение, используя входной файл
2. Прочитайте файл как dataURL
3. Используйте холст, чтобы управлять изображением при необходимости
4. Экспорта новым образом как dataUrl
5. использовать AJAX для загрузки image к серверу как dataURL
6. Используйте функции на стороне сервера, чтобы преобразовать dataUrl в изображение и хранить

https://jsfiddle.net/0hmhumL1/

function resizeInCanvas(img){ 
    ///////// 3-3 manipulate image 
    var perferedWidth = 2700; 
    var ratio = perferedWidth/img.width; 
    var canvas = $("<canvas>")[0]; 
    canvas.width = img.width * ratio; 
    canvas.height = img.height * ratio; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0,0,canvas.width, canvas.height); 
    //////////4. export as dataUrl 
    return canvas.toDataURL(); 
} 

При загрузке в качестве dataUrl вы увеличить размер (требуемая полоса пропускания) от манипулируют изображения примерно на 20%, так что вы не можете видеть сбережения, которые вы ищете, если вы меняете размер изображения значительно ,