Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hggeorgiev/ngx-image-editor
Awesome image editor for Angular 6
https://github.com/hggeorgiev/ngx-image-editor
angular-image-editor angular4 angular5 angular6 crop editor image
Last synced: 3 months ago
JSON representation
Awesome image editor for Angular 6
- Host: GitHub
- URL: https://github.com/hggeorgiev/ngx-image-editor
- Owner: hggeorgiev
- License: mit
- Created: 2017-09-23T12:43:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-24T15:24:31.000Z (about 4 years ago)
- Last Synced: 2024-10-29T23:13:38.291Z (3 months ago)
- Topics: angular-image-editor, angular4, angular5, angular6, crop, editor, image
- Language: TypeScript
- Homepage:
- Size: 1.82 MB
- Stars: 72
- Watchers: 11
- Forks: 36
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
ngx-image-editor
Awesome editor for Angular 6 based on [Angular Material](https://github.com/angular/material2)
[](https://badge.fury.io/js/ngx-image-editor)
[](https://travis-ci.org/hggeorgiev/ngx-image-editor)
**[Live Demo on Slackblitz](https://stackblitz.com/edit/ngx-image-editor-demo)**
## Getting started
##### Step 1: Install Angular Material (+ Material Icons) and Angular Flex Layout
- [Angular Material](https://material.angular.io/guide/getting-started)
- [Angular Flex-Layout](https://github.com/angular/flex-layout)
##### Step 2: Install cropperjs
```bash
yarn add cropperjs
```
##### Step 3: Add `cropperjs` file paths in your `.angular.json`
```json
}
"styles": [
"node_modules/cropperjs/dist/cropper.css"
],
"scripts": [
"node_modules/cropperjs/dist/cropper.js"
]
}
```
##### Step 4: Install `ngx-image-editor`:
```bash
yarn add ngx-image-editor
```
##### Step 5: Import the `NgxImageEditorModule` within your app:
```js
import {NgxImageEditorModule} from "ngx-image-editor";
@NgModule({
imports: [
NgxImageEditorModule
]
})
```
##### Step 6: Use within your application:
```html
```
### API
| Property | Description |
| -------------- | -------------------------------------------------------------- |
| `[config]` | An object containing editor configuration (see **Configuration**) |
| `(file)` | The emitted file after editing. |
#### Configuration
| Property | Description |
| -------------- | -------------------------------------------------------------- |
| ImageName | Name of the image. |
| ImageUrl | URL of the image (if it coming from a CDN) . |
| File | File object of the image (if it is being uploaded through the browser. |
| ImageType | Type of the image (default is `image/jpeg`). |
| AspectRatios | Array of aspect ratios. Available options: `0:0`, `1:1` , `2:3` ,`4:3`, `16:9`l . (default is `0:0`) |
### Example
```typescript
@Component({
selector: 'app-root',
styleUrls: ['./app.component.css']
template: `
`,
})
export class AppComponent {
public config = {
ImageName: 'Some image',
AspectRatios: ["4:3", "16:9"],
ImageUrl: 'https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg',
ImageType: 'image/jpeg'
}
public close() {
// Fired when the editor is closed.
}
public getEditedFile(file: File) {
// Fired when the file has been processed.
}
}
```
### Contributors
| [](https://github.com/hggeorgiev) | [](https://github.com/taulantdisha) |
|---------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|
| [Hristo Georgiev](https://github.com/hggeorgiev) | [Taulant Disha](https://github.com/taulantdisha) |