How to allow edit photo before uploading in mobile?

Support
#1

Hi,
I am using FileUploadField to allow user to upload/take photo from apple ios(iphone).
Before upload photo to web, I want allow user to add some text to the photo，like text watermark.
Could you advise how to implement this, please?
I want while user click upload, then camera, then edit text on the photo, then upload it to web side.

BTW, does FileUploadField can be used in iPhone mobile without any code change?

#3

Hi,

so if I got you right, the user uses the vaadin based generic UI from CUBA directly on the mobile phone. Then they use the FileUploadField to upload a file (in terms of iOS means: selecting an image from the gallery).

And now you want to lay some text over the image.

I think there are two ways to achieve something like this:

  1. if you want them to do this on the iphone directly within the browser, you could try to add a JS component like https://www.imagerjs.com/ and try to do the binding with vaadin (this options is probably the hardest one, and also depending on the JS library not compatible with all browsers, not optimized for mobile use etc.)

  2. if you just want the user to enter the text and perhaps define the alignment or something, you could also do the heavy lifting on the server side. You could e.g. have a text field next to the fileUploadField where the text goes. Then the file gets uploaded to the server and the server then does the post processing of the image when the entry is saved. It can pick up the text and use something like imagemagick to do the image processing

  3. you can also let the user use an external app on iOS to do the watermark upfront and then let them upload the result of that

Option 1 will give you most freedom for the users, but it is harder to implement

Option 2 gives you most native CUBA approach and the freedom in what you can do are also without limits. Only what the user can decide on a per image basis might be a little less

Option 3 is the least effort but the simplest one of course

Perhaps for option 2 i could give an example tonight if I find the time…

Bye
Mario

2 Likes
#4

Hi,

here’s the demo for doing option 2. It turns out the only long part was searching for a proper image library in Java (which does not really seem to exist :)). But this should give you a starting point…

cuba-example-image-processing.zip (94.1 KB)

image-processing-in-cuba

Bye
Mario

2 Likes
#5

Thanks Mario, you work on weekend :grinning:

Then, for a faster way, I am going to create a funciton take watermark photo in my app, then allow user to choose to upload.