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.
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
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.
Harlin,
Check this out
https://www.outsystems.com/forge/component/1393/cropper-mobile/
Eric Halim wrote:
What I need is resizing profile picture image, is this cropper mobile plugin also can be used for resizing images?
Thanks.
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...
Thanks Harlin
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
Nave Jothi wrote:
Try fixing image orientation first, then crop it.
Harlin Setiadarma wrote:
Hi,
Thanks for reply, where to set image orientation Css or cropper preview option, Can you please explain deeply
What plugin did you use exactly?
Cropper plugin or Image Utils plugin?
Cropper plugin
Maybe it's better if you asked in Cropper plugin discussion.
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
Salman
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;"