Angular Image Editor (@sofer1445/angular-image-editor)

A powerful and easy-to-use image editor component for Angular applications, built with Fabric.js. This library provides a full-featured editor with drawing tools, shapes, text, filters, and image adjustments.

Features

• 🎨 Free Drawing: Draw freely on the canvas with customizable brush size and color.
• ➡️ Arrows: Draw arrows to highlight specific areas.
• 📝 Text: Add text with customizable font family, size, color, bold, and italic styles.
• ⬜ Shapes: Add rectangles, circles, and triangles with custom fill and stroke settings.
• 🖼️ Filters: Apply image filters including Grayscale, Sepia, Vintage, Invert, and Blur.
• ☀️ Adjustments: Fine-tune image brightness and contrast.
• 💾 Export: Save the edited result as a high-quality base64 image.
• 🇮🇱 RTL Support: The interface is designed with RTL support (Hebrew UI).

Installation

Install the library using npm:

npm install @sofer1445/angular-image-editor

Usage

1. Import the Component

Import EditorComponent in your Angular standalone component (or module):

import { Component } from '@angular/core';
import { EditorComponent } from '@sofer1445/angular-image-editor';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [EditorComponent],
  template: `
    <div style="height: 600px; width: 100%;">
      <lib-editor 
        [imageSrc]="imageSource" 
        (saved)="onSave($event)" 
        (closed)="onClose()">
      </lib-editor>
    </div>
  `
})
export class ExampleComponent {
  imageSource = 'path/to/image.jpg'; // URL or Base64 string

  onSave(editedImage: string) {
    console.log('Edited image base64:', editedImage);
    // Handle the saved image (e.g., upload to server)
  }

  onClose() {
    console.log('Editor closed');
  }
}

2. API Reference

Inputs

| Input | Type | Default | Description | | :--- | :--- | :--- | :--- | | imageSrc | string \| null | null | The source of the image to load into the editor. Can be a URL or a Base64 data string. |

Outputs

| Output | Event Type | Description | | :--- | :--- | :--- | | saved | EventEmitter<string> | Emitted when the user clicks the "Save" button. The payload is the edited image as a Base64 string (PNG). | | closed | EventEmitter<void> | Emitted when the user clicks the "Back" button. |

Dependencies

This library depends on:

• Angular (>=17.0.0)
• Fabric.js

License

MIT