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

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.

mvp_badge
MVP

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.

  https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/BinaryData_API#Base64ToBinary 


Regards,

John

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?

mvp_badge
MVP

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.

Regards,

John


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

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