Syncfusion react image editor get image url

Question

I'm working with the Image Editor Component in my React application and I'm utilizing the saved prop to receive the file name and type after saving. However, I need to access additional information about the saved file and perform some manipulations or further processing on it

e handleImageSave function, I'm currently receiving the file name and type. However, I need to extract the image file or perform additional operations on final edited file (saved file). How can I access additional file metadata or perform manipulations on the saved file using the ImageEditorComponent?

<ImageEditorComponent
 src={imageUrl}
 ref={imgObj}
 style={{ height: "100%", width: "100%" }} 
 edited={editedImageUrl}
 imageEdit={(editedImage) => handleImageEdit(editedImage)}
 created={(args)=>imageEditorCreated(args)} 
 imageSave={handleImageSave}
 saved={(args) => handleImageSave(args)}
 saved={handleSaveButtonClick} />

Answer 1

By using the getImageData method of the ImageEditor, you can retrieve the image data, and using an external canvas, you can convert the image data into Base64, which can then be loaded into the image editor or used for future purposes. Please refer to the code snippet and sample below.

    const saveClick = () => {
    var imageData = imgObj.current.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
    base64String = canvas.toDataURL();
};

[Sample link][https://stackblitz.com/edit/react-rnyjtm-fmjxn6?file=index.js]