How do I integrate a simple image editor in WeWeb?

Ask us anything How do I?
1

Hi there :vulcan_salute:
I am trying to build a simple possibility for a user to upload two images and overlay them on a Canvas with the possibility to drag and drop the images and move them around.
Also I need the possibility to do simple drawing. In the end I want to save the final flat image.

As far as I understand WeWeb does not have this functionality natively.

Since I am no Frontend Dev nor do I have too much experience with Vue I am wondering what would be the best way to do this?

Might current approach would be to hopefully find a Vue Component / JS Library that somehow does what I want and then try to incorporate it via custom JS / my own component. (Not entirely knowing how yet). Another Idea was using an Iframe, I just image that this would be something generally to avoid?

I’d be thankful for any ideas or suggestions (also for a library) that point me in the right direction.

Regards
Nils

1 Like
2

Hi @Nils :wave:

I would approach it this way:

  • use the file upload element
  • display its results in a stack item

CleanShot 2024-03-08 at 14.36.29@2x
CleanShot 2024-03-08 at 14.36.29@2x854×544 26.7 KB

  • and work through this tutorial by Maël to see if it works for my use case or if I need to tweak it a little bit

Hope that helps! Good luck with this, sounds like a cool project :slight_smile:

1 Like
3

Hi Joyce,
thanks a lot for your response.
Sounds like a few very good hints. I am getting closer :slight_smile:

I’ll let you know, when I am ready :wink:
We want to use it for some functionality we build at https://www.pixitai.io

Regards
Nils

1 Like