Put Text on Image from database while editing image in Canvas

Question

I have a question and i am confused what strategy i should choose to solve this. Here is the description.

1. I have a gallery which is managed on user authentication.
2. Next I have basically a simple form which saves quotes into database.
3. Selecting an image from gallery it is opened in a canvas. I am using Adobe Creative SDK. Here is the demonstration image.

4. Next i have to select(copy) text from database to add(paste) in text field but i have no idea how to do it.

This is the task i have to do for a client. I have never seen a similar example. This is seems unique. Please provide some suggestion on doing it.

Answer 1

Adobe Creative SDK's editor will not allow you to pre-populate text on an image so it's out of the question for this task. You could probably find a way to overlay text on top of the Adobe editor, but then the issue with saving the image rears its head.

If you don't need any of the other editing tools, you could simply create a canvas with the image, overlay the text and allow the user to choose the font, position the text, apply stamps, etc...

Once they're done, wire up a save button to post the field with the contents of canvas.toDataURL('image/png') and have something server-side to save it.

It will be more work than using someone else's widget, but the client will be in control of their own destiny (and have a working product which they wouldn't have before).

Keep it simple and build from there.