Angular Image EditorAngular Image Editor
Angular image editor is a fully responsive image manipulation web app. It can be used as a standalone application or integrate itAngular Image Editor
Angular image editor is a fully responsive image manipulation web app. It can be used as a standa...Overview
AIE - Angular image editor is a fully responsive image manipulation web app. It can be used as a standalone application or integrate it into your existing applications as a tool or component to edit images.
You will get the same experience on every platform because responsive design makes it look good on all resolutions. In this application you can upload any type of images or use a base64 or even an image URL.
Our documentation includes all the information needed to guide you to all features. For any questions, inquiries or issues, feel free to communicate with us.
Application flow / work cycle:
- When the application loads, an image picker will appear where you can click on it and choose the image you want to edit from the window that will appear on click. You can also drag-and-drop any image from your computer to that component.
- After adding the image you want to edit either by upload or drag-and-drop, the image editor component and the result preview component will appear then.
- On the right side you will find the editor with 6 action tabs. Clicking on any action tab will show you the actions that can be performed on the image under the tabs list directly. When changing any action, the image will be edited on the spot.
- Under the uploader component you will find the image result component with three actions (download, export as pdf, and save). The image preview is the final result after your adjustments on the default image.
- Download button will download the edited image in PNG format.
- Extract to pdf button, will generate and download a pdf file containing the edited image.
- Save button may be used if you integrate the application into your other applications, the save button will return a base64 for the edited image where you can call 'YOUR_API' to save it to your database.
- In case you integrate the application into another application, you can edit any image that is uploaded already or found in your database and not just edit it by using the image uploader found in the application. On load of the editor, you may pass a base64 or Image URL for the image that you want to edit, so the editor component and the image viewer will show directly on loading the page containing the image that you passed. In this case the image uploader will be hidden , since by default we are setting the image we want to edit.
- The application was built using angular and bootstrap, so yes, responsive design makes it look good on all resolutions. It can be used on several PC resolutions, tablets, and phones.
Features
- Upload images to manipulate
- Drag-and-Drop images to manipulate
- Crop Image (using predefined ratios or free crop)
- Rotate (left, right or by setting rotate angle)
- Zoom (in - out)
- Flip (vertically, horizontally)
- Image color adjustments (Brightness - Contrast - Blur - Hue-rotate - Invert - Saturate - Sepia - Grayscale).
- Save the edited image to your database using its base64
- Download the edited image to your computer
- Download the edited image as a pdf file
- Fully Responsive
- Smooth and Fast UI
- User friendly and easy to use.
- Easy to integrate into another applications.
- Helpful support
Requirements
- Node.js for Angular installation
- Angular CLI for Angular.
Instructions
- You need NodeJS and Angular ClI to be installed on your PC.
- Open the command prompt and link to the application files.
- Run 'npm install' command to install all the needed packages.
- Run 'ng serve --o' command.
- When the application is served, it will open.
Other items by this author
Category | Scripts & Code / AngularJS |
First release | 25 November 2021 |
Last update | 25 November 2021 |
Files included | .css, .html, Javascript .js |
Tags | photo editor, image editor, angular, image crop, image to pdf, image manipulate, image adjust, angular photo, image rotate |