How to Load Blob Data into Angular Image Editor for Preview

2 mins read

This article explains how to fetch image data as a Blob from an API and preview it using the Angular Image Editor component. It also demonstrates how to configure the editor to show only the image preview without any toolbar options.

Load Blob Data into Angular Image Editor for Preview

To preview an image using the Image Editor component, follow these steps:

Simulate fetching an image from a remote URL (or use your actual API endpoint).
Convert the Blob to a Data URL using the FileReader API.
Load the image into the editor using the open() method provided by the Image Editor component.
Disable the toolbar to show a clean preview by setting the toolbar property to an empty array ([]).

This approach ensures that the image is displayed without any editing tools, making it ideal for read-only or preview-only scenarios.

Code Example

app.component.html

<ejs-imageeditor #imageEditor id="image-editor" [toolbar]="toolbar">
   </ejs-imageeditor>

app.component.ts

public toolbar = [];
 ngOnInit() {
   // Simulate fetching Blob data from an API
   this.fetchImage();
 }
 fetchImage() {
   fetch(
     'https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Portrait.png'
   ) // Replace with your actual API URL
     .then((response) => response.blob())
     .then((blob) => this.loadImage(blob))
     .catch((error) => console.error('Error loading image:', error));
 }

 loadImage(blob: Blob) {
   // Convert Blob to Data URL
   const reader = new FileReader();
   reader.onloadend = () => {
     // Load the image data URL into the image editor
     const dataUrl = reader.result as string;
     this.imageEditor.open(dataUrl);
   };
   reader.readAsDataURL(blob);
 }

Output

The image is displayed inside the Image Editor component without any toolbar, providing a clean preview experience.

Live Sample

StackBlitz Demo

Conclusion

I hope you enjoyed learning about how to load blob data into Angular Image Editor for preview.

You can refer to our Angular Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Image Editor and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)