[DrawerJs] How to Download the Edited Canvas Image and Save the Canvas Changes in Reactive
Web icon
Forge component by John Salamat
Application Type

Hi Guys,

I have already Implemented DrawerJs in the Reactive Application. I need to Implement the below actions in the DrawerJs.

1. Download the Edited Canvas Image

2. Save the Canvas in Database with all the changes

3. Edit the Canvas after saved to DB.

4. Redo and Undo Option.

Let me know the possibilities for these Implementations in Outsystems.

Hi Mayilsamy,

BinaryData API should be able to help in saving the canvas in reactive. 

By using the image source stripping out the header ("data:image/png;base64,") of the image element and passing that to server using the Base64ToBinary to prepare it on being save on the server.




Hi @John Salamat 

Thanks for guiding me, Let me explain my complete scenario to you.

I have to Edit the image and need to Save the Edited image in the Database.

Also When I click the Edited Image either I need to Re-edit the same Image or It should allow me to remove the previous Edits

This one is Edited Canvas I need to store this canvas with all the edits

Next time I have to remove the previous edits in the canvas

Can you Please guide me to achieve this?

Hi @Mayilsamy Lingappan,

If I understand your question correctly, you may set the image as a background using setBackgroundImage https://carstenschaefer.github.io/DrawerJs/examples/api/

    function onBackgroundImageButtonClick (btn) {

        console.log('onBackgroundImageClick()');         var imgEl = $('.bg-image-selector.checked img')[0];         var position = $('.bg-positions-list :checked')[0].value;         console.log('pos = ', position);         drawer.api.setBackgroundImage(imgEl, {'imagePosition' : position});     }

and reload the canvas to reset the image.



Hi John,

Background Image Implementation was already done.

My Question is 1. How to save the Canvas Image as Binary or Save to DataBase.

2. How to Edit the Canvas Again with previous changes

João Salamat,

 where do I add this code?

I want to add a background image to paint over it.

I'm on traditional web

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.