QPASHIK Posted January 29, 2020 Share Posted January 29, 2020 Добрый день! У нас на предприятии сложилась такая проблема: У многих пользователей сейчас современные телефоны Андроид и iOS. Сделанные на них фотографии имеют большой размер 10-15 Мб. В связи с этим усложняется загрузка фото в мобильной версии через UnimFileUpload - особенно если пользователю необходимо загрузить несколько файлов (3-5), загрузка происходит долго через мобильные сети 3G/4G. Есть ли техническая возможность в UniGUI для мобильных телефонов при загрузке фото изменить качество съемки или размер передаваемого фото для ускорения загрузки? Можно ли задать настройки для камеры или может быть обработать (сжать) изображение на уровне браузера через JS? Вопрос очень серьезный, думаю волнует не только пользователей нашего предприятия! Quote Link to comment Share on other sites More sharing options...
stas Posted January 29, 2020 Share Posted January 29, 2020 Есть. Кусок кода примерно такой 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); )]); От себя добавлю, я перестал видеть смысл использовать Мобильную версию Унигуи (Фаршад ее похерил) Посмотрите в сторону нативных приложений Quote Link to comment Share on other sites More sharing options...
QPASHIK Posted January 29, 2020 Author Share Posted January 29, 2020 У нас активно используется Мобильная версия, в принципе все нормально. Подскажите, как применить вышеуказанный код правильно. Вставляю через UniSession.AddJS(' '); перед выполнением UnimFileUpload1.Execute - не работает, пишет ошибку в JS "неизвестный идентификатор". Quote Link to comment Share on other sites More sharing options...
stas Posted January 29, 2020 Share Posted January 29, 2020 Ну, полный код такой 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; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.