https://github.com/harryy2510/ngx-img
https://github.com/harryy2510/ngx-img
angular angular4 angular5 angular6 crop image upload
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/harryy2510/ngx-img
- Owner: harryy2510
- Created: 2017-11-12T19:29:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:33:17.000Z (over 3 years ago)
- Last Synced: 2025-09-01T11:56:32.094Z (10 months ago)
- Topics: angular, angular4, angular5, angular6, crop, image, upload
- Language: HTML
- Size: 8.17 MB
- Stars: 27
- Watchers: 2
- Forks: 21
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ngx-img - Angular Image Upload & Crop
[](https://badge.fury.io/js/ngx-img)
[](https://travis-ci.org/harryy2510/ngx-img)
[](https://coveralls.io/github/harryy2510/ngx-img?branch=master)
[](https://david-dm.org/harryy2510/ngx-img)
[](https://david-dm.org/harryy2510/ngx-img#info=devDependencies)
## Demo
View in action at https://harryy2510.github.io/ngx-img
## Dependencies
* [Angular](https://angular.io) (*requires* Angular 4 or higher, tested upto 9.1.9)
* [CropperJS](https://github.com/fengyuanchen/cropperjs) (required for cropping)
## Installation
Install above dependencies via *npm*.
Now install `ngx-img` via:
```shell
npm install --save ngx-img
```
---
##### SystemJS
>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-img`:
```js
map: {
'ngx-img': 'node_modules/ngx-img/bundles/ngx-img.umd.js',
}
```
---
Once installed you need to import the main module:
```js
import { NgxImgModule } from 'ngx-img';
```
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ` NgxImgModule .forRoot()`):
```js
import { NgxImgModule } from 'ngx-img';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgxImgModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
Other modules in your application can simply import ` NgxImgModule `:
```js
import { NgxImgModule } from 'ngx-img';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxImgModule, ...],
})
export class OtherModule {
}
```
## Usage
## License
Licensed under the MIT License (MIT)