Skip to content

SEO-136418 Angular Image Editor #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

SEO-136418 Angular Image Editor #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f30657d
SEO-136418-Angular-Image-Editor-GitHub
Scholar-jaruha Jun 7, 2023
06aa4f1
Update README.md
Scholar-jaruha Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 57 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Getting Started with the Angular Image Editor Component

A quick start Angular project that shows how to add Angular Image Editor component to the Angular App. This project also includes a code snippet to open and save the image using open and save methods of the image editor.

Example: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default

Documentation: https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/
The [Angular Image Editor](https://www.syncfusion.com/angular-components/angular-image-editor?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples) component is a graphical user interface used for editing images. A quick start Angular project that shows how to add Angular Image Editor component to the Angular App. This project also includes a code snippet to open and save the image using open and save methods of the image editor.

# Project pre-requisites

Expand Down Expand Up @@ -35,3 +31,59 @@ npm install
Run ng serve command for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


## Features and Benefits

## Selection and cropping

The Image Editor component has multiple selection options including square, circle, and can be customized to various aspect ratios. The selection region can be dragged and resized for cropping an image.

## Annotation

The Image Editor has multiple annotations support including text, freehand drawings, and shapes such as rectangle, ellipse, and line.

## Transform images

Rotate, flip, and zoom images with annotations.

## Load image initially

It supports to load an image either as base 64 or URL. It supports PNG, JPEG, and SVG image types.

## Toolbar

Toolbars are used to interact and edit images with customization. Users can define their own toolbars for an image editor by customizing the items or the entire toolbar.

## Related links
[Learn More about Angular Image Editor](https://www.syncfusion.com/angular-components/angular-image-editor?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/angular/confirm?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Documentation](https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[View Demos](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default)

[Community Forums](https://www.syncfusion.com/forums/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/angular?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Online example](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)

[Knowledge base](https://support.syncfusion.com/kb?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)


## About Syncfusion Angular Components

Syncfusion's [Angular Components](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples) library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to image editor, we provide popular Angular Components such as [DataGrid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), and [Word Processor](https://www.syncfusion.com/angular-components/angular-word-processor?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples).

### About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [react](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:[email protected]?Subject=Syncfusion Angular Image Editor - GitHub" target="_top">[email protected]</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=angular-image-editor-github-samples">www.syncfusion.com</a> | Toll Free: 1-888-9 DOTNET <br>
</p>