https://github.com/lukaskupczyk/ngx-super-croppie
A simple Angular wrapper for croppie
https://github.com/lukaskupczyk/ngx-super-croppie
angular croppie croppiejs
Last synced: 7 months ago
JSON representation
A simple Angular wrapper for croppie
- Host: GitHub
- URL: https://github.com/lukaskupczyk/ngx-super-croppie
- Owner: lukaskupczyk
- License: mit
- Created: 2021-05-02T11:49:37.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-26T18:18:27.000Z (12 months ago)
- Last Synced: 2025-04-05T01:32:51.854Z (7 months ago)
- Topics: angular, croppie, croppiejs
- Language: TypeScript
- Homepage:
- Size: 695 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NgxSuperCroppie
NgxSuperCroppie is a simple angular8+ wrapper for [croppie](https://github.com/foliotek/croppie).
## Version
The version numbers are in line with major Angular versions:
| Angular Version | ngx-super-croppie Version |
| --------------- | ------------------------- |
| 10.x.x | 10.x.x |
| 11.x.x | 11.x.x |
| 12.x.x | 12.x.x |
| 13.x.x | 13.x.x |
| 14.x.x | 14.x.x |
| 15.x.x | 15.x.x |
| 16.x.x | 16.x.x |
| 17.x.x | 17.x.x |
| 18.x.x | 18.x.x |
## Installation
Install the package and croppie with yarn:
```bash
yarn add ngx-super-croppie croppie @types/croppie
```
or with npm:
```bash
npm install ngx-super-croppie croppie @types/croppie
```
## Usage
### 1. Import ngx-super-croppie in your src/app/app.module.ts
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxSuperCroppieModule } from 'ngx-super-croppie';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxSuperCroppieModule],
providers: [NgxSuperCroppieModule],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### 2. Import the croppie styles in your src/styles.scss
```css
/* You can add global styles to this file, and also import other style files */
@import '~croppie/croppie.css';
```
### 3. Configure ngx-super-croppie in your component.ts
```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { CroppieOptions, ResultOptions } from 'croppie';
import { NgxSuperCroppieComponent } from 'ngx-super-croppie';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
@ViewChild('ngxSuperCroppie')
ngxSuperCroppie: NgxSuperCroppieComponent;
public croppieOptions: CroppieOptions = {
boundary: { width: 220, height: 220 },
customClass: 'my-class',
enableExif: true,
enableOrientation: true,
enableZoom: true,
enforceBoundary: true,
enableResize: false,
maxZoom: 1,
minZoom: 0,
mouseWheelZoom: true,
showZoomer: true,
viewport: { width: 200, height: 200, type: 'circle' },
};
public url: string | ArrayBuffer;
public points: number[] = [0, 0, 200, 200];
public orientation = 1;
public zoom = 0;
public resultOptions: ResultOptions = {
type: 'base64',
size: 'viewport',
format: 'jpeg',
quality: 1,
circle: false,
};
public croppedImage: string | HTMLElement | Blob | HTMLCanvasElement;
ngOnInit(): void {
this.url = null;
}
public updateCroppedImage(
crop: string | HTMLElement | Blob | HTMLCanvasElement,
): void {
this.croppedImage = crop;
}
public handleFileInput(files: FileList): void {
if (files.length !== 1) {
return;
}
const file = files[0];
const fileReader = new FileReader();
fileReader.onloadend = () => {
this.url = fileReader.result;
};
fileReader.readAsDataURL(file);
}
public get(): void {
const data = this.ngxSuperCroppie.get();
console.log(data);
}
public destroy(): void {
this.ngxSuperCroppie.destroy();
}
public rotate(): void {
this.ngxSuperCroppie.rotate(90);
}
public setZoom(): void {
this.ngxSuperCroppie.setZoom(0.3);
}
}
```
### 4. Add ngx-super-croppie to your component.html
```html
NgxSuperCroppie Demo
Select image:
Get
Destroy
Rotate 90°
Zoom 0.3
![cropped image]()
```
## Example
You can find a full example under src/app/app.component.ts in this repository.
To run the example, follow these steps:
1. Clone the repository:
`git clone git@github.com:lukaskupczyk/ngx-super-croppie.git`
2. Install the necessary dependencies:
`yarn` or `npm install`
3. Serve angular:
`yarn start` or `npm run start`
4. Open the app in your browser:
[http://localhost:4200](http://localhost:4200)
## Development
To build the module use `yarn build:package`
## Credit
ngx-super-croppie is inspired by the (unfortunately) unmaintained [ngx-croppie](https://github.com/deej81/ngx-croppie) package.