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?

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

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