Размер изображения при загрузке

[QPASHIK]

Добрый день!

У нас на предприятии сложилась такая проблема:

У многих пользователей сейчас современные телефоны Андроид и iOS. Сделанные на них фотографии имеют большой размер 10-15 Мб. В связи с этим усложняется загрузка фото в мобильной версии через UnimFileUpload - особенно если пользователю необходимо загрузить несколько файлов (3-5), загрузка происходит долго через мобильные сети 3G/4G.

Есть ли техническая возможность в UniGUI для мобильных телефонов при загрузке фото изменить качество съемки или размер передаваемого фото для ускорения загрузки? Можно ли задать настройки для камеры или может быть обработать (сжать) изображение на уровне браузера через JS?

Вопрос очень серьезный, думаю волнует не только пользователей нашего предприятия!

[stas]

Есть.

Кусок кода примерно такой

    var filesToUpload = input.files;  
    var file = filesToUpload[0];                                 
    var img = document.createElement("img");                     
    var reader = new FileReader();                               
    reader.onload = function(e)                                  
    {                                                            
        img.src = e.target.result;                               
                                                                 
        var canvas = document.createElement("canvas");           
        var ctx = canvas.getContext("2d");                       
        ctx.drawImage(img, 0, 0);                                
                                                                 
        var MAX_WIDTH = 1024;                                    
        var MAX_HEIGHT = 768;                                    
        var width = img.width;                                   
        var height = img.height;                                 
                                                                 
        if (width > height) {                                    
          if (width > MAX_WIDTH) {                               
            height *= MAX_WIDTH / width;                         
            width = MAX_WIDTH;                                   
          }                                                      
        } else {                                                 
          if (height > MAX_HEIGHT) {                             
            width *= MAX_HEIGHT / height;                        
            height = MAX_HEIGHT;                                 
          }                                                      
        }                                                      
        canvas.width = width;                                    
        canvas.height = height;                                  
        var ctx = canvas.getContext("2d");                       
        ctx.drawImage(img, 0, 0, width, height);                 
                                                                 
        var dataurl = canvas.toDataURL("image/jpeg"); var avalue=input.value; input.value="";   
        ajaxRequest(+tlbBtn.JSName+,"export",["type=jpeg","uri="+dataurl,"filename="+avalue]);
    };                                                           
    reader.readAsDataURL(file);                                 
      )]);

От себя добавлю, я перестал видеть  смысл использовать Мобильную версию Унигуи (Фаршад ее похерил)

Посмотрите в сторону нативных приложений

[QPASHIK]

У нас активно используется Мобильная версия, в принципе все нормально. Подскажите, как применить вышеуказанный код правильно.

Вставляю через UniSession.AddJS('  '); перед выполнением UnimFileUpload1.Execute - не работает, пишет ошибку в JS "неизвестный идентификатор".

[stas]

Ну, полный код такой

type TmyUnimFileEdit=class(TUnimFileEdit);
     TMyUnimcustomButtonItem=class(TUnimcustomButtonItem);
     TmyUniToolButton=class(TUnimToolButton);

procedure TfmViewMPhoto.CreateFileInput;
var FJSEdit:TUnimFileEdit;

begin
 FJSEdit:=TUnimFileEdit.Create(Self);
 FJSEdit.Name := 'FileEdit_'+FJSEdit.JSName;
 FJSEdit.Visible:=false;
 FJSEdit.Parent:=Self;
 TmyUnimFileEdit(FJSEdit).JSHackObject(FJSEdit.JSControl);
 TmyUnimFileEdit(FJSEdit).FieldLabelWidth:=30;
 TmyUnimFileEdit(FJSEdit).FieldLabel:='';
 FJSEdit.Name := FJSEdit.JSName;
 TmyUnimFileEdit(FJSEdit).JSConfig('accept',['image/jpeg']);
 TmyUnimFileEdit(FJSEdit).JSCall('on',['change', TmyUnimFileEdit(FJSEdit).JSFunction('var input=document.getElementsByName("'+TmyUnimFileEdit(FJSEdit).JSName+'")[0];'+
' Ext.Viewport.mask({ xtype: "loadmask", message: "Завантаження..." });'#13#10+
'    var filesToUpload = input.files;  '#13#10+
'    var file = filesToUpload[0];                                 '#13#10+
'    var img = document.createElement("img");                     '#13#10+
'    var reader = new FileReader();                               '#13#10+
'    reader.onload = function(e)                                  '#13#10+
'    {                                                            '#13#10+
'        img.src = e.target.result;                               '#13#10+
'                                                                 '#13#10+
'        var canvas = document.createElement("canvas");           '#13#10+
'        var ctx = canvas.getContext("2d");                       '#13#10+
'        ctx.drawImage(img, 0, 0);                                '#13#10+
'                                                                 '#13#10+
'        var MAX_WIDTH = 1024;                                    '#13#10+
'        var MAX_HEIGHT = 768;                                    '#13#10+
'        var width = img.width;                                   '#13#10+
'        var height = img.height;                                 '#13#10+
'                                                                 '#13#10+
'        if (width > height) {                                    '#13#10+
'          if (width > MAX_WIDTH) {                               '#13#10+
'            height *= MAX_WIDTH / width;                         '#13#10+
'            width = MAX_WIDTH;                                   '#13#10+
'          }                                                      '#13#10+
'        } else {                                                 '#13#10+
'          if (height > MAX_HEIGHT) {                             '#13#10+
'            width *= MAX_HEIGHT / height;                        '#13#10+
'            height = MAX_HEIGHT;                                 '#13#10+
'          }                                                      '#13#10+
'        }                                                      '#13#10+
'        canvas.width = width;                                    '#13#10+
'        canvas.height = height;                                  '#13#10+
'        var ctx = canvas.getContext("2d");                       '#13#10+
'        ctx.drawImage(img, 0, 0, width, height);                 '#13#10+
'                                                                 '#13#10+
'        var dataurl = canvas.toDataURL("image/jpeg"); var avalue=input.value; input.value="";   '#13#10+
'        ajaxRequest('+tlbBtn.JSName+',"export",["type=jpeg","uri="+dataurl,"filename="+avalue]);'#13#10+
'    };                                                           '#13#10+
'    reader.readAsDataURL(file);                                  '#13#10
      )]);
UniSession.AddJS(tlbBtn.JSName+'.owner.fileInput='+FJSEdit.JSName+';');
end;

Я поднимал свн 2-х годичной давности, что-то мне там не понравилось, но файлы сжимались

И еще

procedure TfmViewMPhoto.tlbBtnAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
  var MS:TMemoryStream;
  ss:String;
begin
 if EventName='export' then
  begin
    MS:=TMemoryStream.Create;
   try
    ss:=copy(Params.Values['uri'],pos(',',Params.Values['uri'])+1,length(Params.Values['uri']));
    uIdCoderMIME.TIdDecoderMIME.DecodeStream(SS,MS);
    MS.Position:=0;
    imPhoto.LoadFromStream(MS);
     UniSession.AddJS('Ext.Viewport.unmask();');
    finally
    MS.Free;
   end;

  end;
end;