Виджет загрузки изображений, который изменяет размер изображения и затем загружает его

Question

Я хочу создать виджет загрузки изображений, который изменяет (масштабирует) изображения до низкого разрешения (скажем, 640x640).Я хочу затем загрузить эти изображения с измененным размером на сервер.Главным образом, чтобы предотвратить огромные загрузки файлов.

Каков наилучший способ реализовать это?Я использую JQuery и Django.

Answer 1

Использовать Canvas и HTML5.

Это довольно просто, просто используйте FileReader (не будет работать на iOS / iPhone, так как у них нет файлов на уровне пользователя), чтобы открыть список File / File, который вы получите из файла типа вводаelement:

function fileSelectHandler(e) {
    files = e.target.files;
    var len = files.length;
    for(var filei = 0; filei < len; filei += 1) {
         var aFile = files[filei];
         var fileReader = new FileReader();
         fileReader.onload = (function (theFile) {
             return function(e) {
                 if(e.target.result != null && e.target.result != undefined) {    
                     var imge = new Image();
                     imge.src = e.target.result;
                     imageDataURLs[theFile.name] = imge;
                     imge.onload = (function () {
                         return function(e) {
                            draggables[0] = new Draggable(g3,imge);
                            draggableFlow.launch();
                         };
                     })();
                 }
             };
       })(aFile);
       fileReader.readAsDataURL(aFile);
   } // for next file 
};

Затем запишите изображение в элемент canvas и разрешите пользователю перетаскивать его и обрезать.Когда они счастливы, возьмите данные с холста, используя CanvasRenderingContext2D.getImageData, и отправьте эту строку base64 на сервер в XHR.

Answer 2

Поддержка браузера для этого будет ограничена, хотя вы можете уменьшить это, написав прокладки Flash и Silverlight, которые делают то же самое.Я видел несколько примеров html5, как это сделать.

Plupload - хороший инструмент для управления этим и предоставляет вам все шаймы и загрузчики, описанные выше.

http://www.plupload.com/example_all_runtimes.php

если вы посмотрите на пример кода для встраивания, то есть объект изменения размера как часть конфигурации, в которой вы можете определить параметры, описанные в вашем посте