How to get and load the modified image as Base64 using Image Editor

Description

The Syncfusion Image Editor control is a versatile tool that allows users to edit images within their web applications. One of the functionalities includes the ability to save the modified images in various formats. The
getImageData method is particularly useful when you need to capture the pixel data of the edited image. This data can then be converted into a Base64 string, which is a text-based representation of the image that can be easily stored in a database or transmitted for other uses.

Solution

To work with the altered image in Base64 format, follow the steps outlined below:

1. Use the getImageData method to retrieve the image data from the Image Editor control.
2. Convert the retrieved image data into Base64 format.
3. Store the Base64 string for later use or further processing.
4. To continue editing the image, load the Base64 format image back into the Image Editor control using the
   open method.

Below is an example code snippet demonstrating how to implement this process:

<div id="imageeditor"></div>
<button id="saveImagebtn">Save Image</button>
<button id='getImageBtn'>Load Image</button>

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';

let imageEditorObj = new ImageEditor({
    created: () => {
        let imageUrl = 'https://ej2.syncfusion.com/demos/src/image-editor/images/default.png';
        imageEditorObj.open(imageUrl);
    }
});

imageEditorObj.appendTo('#imageeditor');

const saveButton = new Button({ cssClass: 'e-btn', content: 'Save Image' });
saveButton.appendTo('#saveImagebtn');

const loadImageButton = new Button({ cssClass: 'e-btn', content: 'Load Image' });
loadImageButton.appendTo('#getImageBtn');

let base64String;

saveButton.element.onclick = () => {
    let imageData = imageEditorObj.getImageData();
    const canvas = document.createElement('canvas');
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    const context = canvas.getContext('2d');
    context.putImageData(imageData, 0, 0);
    base64String = canvas.toDataURL(); // For further usage
};

loadImageButton.element.onclick = () => {
    imageEditorObj.open(base64String); // To open the image as Base64 format
};

Demo

To see a live demonstration of the above implementation, please visit the following sample link: Image Editor Base64 Sample

Additional References

• Syncfusion Image Editor Documentation: ImageEditor Component
• Base64 Encoding: Base64 Data Encodings
• HTML Canvas API: CanvasRenderingContext2D