343
Views
15
Comments
Image Resize client action for Mobile App?
Question

Hi, on my requirement I need to have user sign up and getting their profile photo from camera.

But on modern smartphone, camera resolution so high that it create time-out when sending to server.

I have Image Resize server action to resize it before saving to database, but it will be better to resize image on client side before sending to server.

I only found Cropper mobile plugin which only crop, not resize the image.

Any ideas?

Thanks and Regards.

Staff
Rank: #235

Hi Harlin,

You will have to use a Javascript node and some JS magic:

Check out this for example: https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly

Rank: #10178

Thanks, but I'm not JS guys...

I'm looking for mobile client plugin if available.

I will pass this to my team and hopefully can find a JS Guru to wrote plugin for this.

Rank: #368
Rank: #368

That's true. Sorry that was cropper not resizer.

So I think it should be a cordova plugin then, like this one https://www.npmjs.com/package/cordova-plugin-image-resizer then wrap it on Outsystems.

Never tried it myself but that's the way it's supposed to be. :) worth to try

For P10 mobile app, I gladly present my new Image Utils Mobile component in Forge:

https://www.outsystems.com/forge/2078/


Resize (while maintaining aspect ratio), Crop, and Identify width/height of image binary data.

All works client-side, before sending image to server...

Rank: #127

Thanks Harlin

Rank: #21581

Hi guys,

I am facing the issue for portrait images in cropper, When we take a picture in portrait mode, In Cropper preview image has changed the landscape,How solve this issue. This issue only for iphone



Thanks,

Nave

Rank: #45

Hi Harlin,


You can use below component.it will compress the image size.

We have used in 2 project and working fine.

https://www.outsystems.com/forge/component-overview/2347/image-compress


Thanks,

Salman

Rank: #6275

Hi,

Forced CSS works well where you can control width and keep height as an auto. It will help to maintain aspect ratio without affecting quality or size.

For image compress and other things, https://www.outsystems.com/forge/component-overview/7180/image-utils-reactive works very well for Mobile apps in both online and offline mode.

Style for upload:

"display: block;
width: 200px;
  height: auto;
  position: relative;
overflow: hidden;"

Style for Image:

"display: block;
  width: 100%;
  height: auto;
object-fit: contain;"