How to Show Preview Icon Using Angular Image Editor Component?

3 mins read

This article explains how to add a Preview icon to the toolbar of the Angular Image Editor component. The preview functionality allows users to view the edited image in a modal dialog before saving or exporting.

Show Preview Icon

To implement a preview feature in the Angular Image Editor component, you can customize the toolbar to include a Preview button. When this button is clicked, the current image data is extracted from the editor, rendered onto a canvas, and displayed inside a modal dialog.

Here’s how it works technically:

Toolbar Customization: The toolbar is customized using the customToolbar array, which includes a new item labeled “Preview” with an eye icon (e-eye e-icons).
Event Handling: The toolbarItemClicked event is used to detect when the Preview button is clicked. Inside the handler, the image data is retrieved using getImageData().
Canvas Rendering: A canvas element is created dynamically, and the image data is drawn onto it using putImageData. This allows you to convert the image into a base64-encoded format using toDataURL().
Dialog Display: The base64 image is assigned to an tag inside a modal dialog (ejs-dialog), which is then shown using ejDialog.show().

Code Example

app.component.html

<div id="dialog-container">
     <ejs-imageeditor
       #imageeditor
       id="image-editor"
       (created)="created()"
       [toolbar]="customToolbar"
       (toolbarItemClicked)="toolbarItemClicked($event)"
     >
     </ejs-imageeditor>
     <ejs-dialog
       id="dialog"
       #ejDialog
       target="#dialog-container"
       isModal="true"
       header="Preview"
       [visible]="visible"
       [showCloseIcon]="true"
       width="350px"
       height="500px"
       (overlayClick)="onOverlayClick()"
       ><div
         style="height: 100%; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;"
       >
         <img
           id="dialogimage"
           src=""
           style="max-width: 100%; max-height: 100%; object-fit: contain;"
         />
       </div>
     </ejs-dialog>
   </div>

app.component.ts

  public customToolbar = [
   'ZoomOut',
   { text: 'Preview', prefixIcon: 'e-eye e-icons' },
 ];
 
public toolbarItemClicked(args: ClickEventArgs): void {
   if (args.item.text == 'Preview') {
     var data = this.imageEditorObj.getImageData();
     const canvas = document.createElement('canvas');
     const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
     canvas.width = data.width;
     canvas.height = data.height;
     ctx.putImageData(data, 0, 0);
     var img: any = document.getElementById('dialogimage');
     img.src = canvas.toDataURL();
     this.ejDialog.show();
   }
 }

 // Hide the Dialog when click the Dialog overlay
 public onOverlayClick() {
   this.ejDialog.hide();
 }

Output

When the user clicks the Preview button, a modal dialog appears showing the current state of the edited image.

Live Sample

StackBlitz Demo

Conclusion

I hope you enjoyed learning about how to show preview icon using Angular Image Editor Component.

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)