How to catch the event of "Apply" with latest imageData

[Amal Ayyash]

I have been trying with all available events to catch the event of "OK" button click, that has the fresh imageData of the last edit. The closest I got was `cropping` but the imageData is not up to date, I have to wait a few before I can read it. I need this to keep a fresh file content in my component, to be able to upload it (funny this is not available anywhere in this widget, like imageEditor.getFile())

So what is the way to catch the apply method? 

[Keerthikaran Venkatachalam]

Hi Amal,

Thank you for reaching out to Syncfusion Support.

We have checked the reported query and prepared the sample to meet your requirements. When we click the apply button, the toolbarItemClicked event is triggered, and you can retrieve the current ImageData using the getImageData method. When clicking the Set Image button, we will load the image data into the ImageEditor. Please refer to the code snippets and samples below.

    <ejs-imageeditor #imageeditor id="image-editor" (toolbarItemClicked)="toolbarItemClicked($event)" (created)="created()">

    </ejs-imageeditor>

public toolbarItemClicked(args) {

        if (args.item.tooltipText == "Apply") {

           this.saveImageData();

        }

    }

    public saveImageData() {

        var imageData = this.imageEditorObj.getImageData();

        const canvas = document.createElement('canvas');

        canvas.width = imageData.width;

        canvas.height = imageData.height;

        // Get the 2D rendering context of the canvas

        const context = canvas.getContext('2d');

        // Put the ImageData onto the canvas

        context.putImageData(imageData, 0, 0);

        // Convert the canvas content to a Base64 encoded URL

        this.base64String = canvas.toDataURL();

        console.log(this.base64String);

    }

    public btnClick() {

        this.saveImageData();

    }

    public click() {

        this.imageEditorObj.open(this.base64String);

    }

 

Sample link: https://stackblitz.com/edit/angular-p1fokt-xghyyw?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Amal Ayyash]

Thanks for getting back. So basically I have to check the tooltip text? but what if its localized, and the tool tip doesn't say "Apply?" do I check for anything else more accurate?

[Keerthikaran Venkatachalam]

Hi Amal,

We have validated the reported query, and you can use args.item.id in the toolbarItemClicked event to check if the apply button was clicked. The ID will be returned as a combination of the image editor ID and "ok." You can either split and check the ID or directly verify it as `imageEditorId + ok`. Please refer to the code snippets and sample below.

public toolbarItemClicked(args) {

        if (args.item.id.split("_")[1] == "ok") {

           this.saveImageData();

        }

    }

Sample link: https://stackblitz.com/edit/angular-p1fokt-puqww3?file=src%2Fapp.component.ts

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V