# ngx-cropper-2

> An angular2 & angular4 image plugin, includes upload cropper save to server

Latest version **1.0.0** (published 2017-12-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-cropper-2
pnpm add ngx-cropper-2
yarn add ngx-cropper-2
bun add ngx-cropper-2
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-12-28 |
| First published | 2017-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | TaylorPzreal |
| Maintainers | masurceac |
| Keywords | angular2, angular4, ngx, cropper, upload, image |

## Links

- npm: https://www.npmjs.com/package/ngx-cropper-2
- Repository: https://github.com/answer-is-42/ngx-cropper-2
- Homepage: https://github.com/answer-is-42/ngx-cropper-2#readme
- Issues: https://github.com/answer-is-42/ngx-cropper-2/issues
- npm.io page: https://npm.io/package/ngx-cropper-2

## Dependencies (2)

- [cropperjs](https://npm.io/package/cropperjs.md) ^1.0.0-rc.3
- [@types/cropperjs](https://npm.io/package/@types/cropperjs.md) 0.0.26

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-12-28
- 1.0.0-alpha.8 — 2017-09-14

## README

# ngx-cropper

An Angular2 & Angular4 image plugin, includes upload, cropper, save to server.

 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

## Example

![Example](./example.png)

## Usage

### 1. Install

```bash
  npm i ngx-cropper-2
```

### 2. Config __example.module.ts__

```typescript
import { NgxCropperModule } from 'ngx-cropper-2';

@NgModule({
  imports: [
    NgxCropperModule
  ]
})
```

### 3. Config __example.component.html__

```html
  <ngx-cropper
  [config]="ngxCropperConfig"
  [cropperConfig]="cropperJsConfig"
  [onSave]="onSaveCallback"
  (onUploadSuccess)="onUpload($event)"
  (onUploadError)="onError($event)"
  (onSizeLimitExceed)="sizeLimitExceed($event)"
  (onCropperClosed)="cropperClosed()"
  (onCropperOpened)="cropperOpened()"
  ></ngx-cropper>
```

### 4. Config __example.component.ts__

```typescript
@component()
export class ExampleComponent {
  public ngxCropperConfig: object;

  // config 
  public cropperJsConfig: object;

  constructor() {
    this.ngxCropperConfig = {
      url: null, // image server url
      maxsize: 512000, // image max size, default 500k = 512000bit
      title: 'Apply your image size and position', // edit modal title, this is default
      uploadBtnName: 'Upload Image', // default Upload Image
      uploadBtnClass: null, // default bootstrap styles, btn btn-primary
      cancelBtnName: 'Cancel', // default Cancel
      cancelBtnClass: null, // default bootstrap styles, btn btn-default
      applyBtnName: 'Apply', // default Apply
      applyBtnClass: null, // default bootstrap styles, btn btn-primary
      fdName: 'file', // default 'file', this is  Content-Disposition: form-data; name="file"; filename="fire.jpg"
      closeBtnClass: "btn-close",
      acceptFiles: "image/*" // accept file types
    }
    
    // default settings
    this.cropperJsConfig = { // see the full list at https://www.npmjs.com/package/cropperjs
      autoCrop: true,
      viewMode: 1,
      dragMode: 'move',
      guides: true,
      movable: true,
      cropBoxMovable: false,
      cropBoxResizable: false
    };
  }

  // deal callback data
  public onUpload(data: any) {
    // do you want to do
    console.warn(JSON.parse(data));
    // data contains server response
  }

  public onError(error: any) {
    // do you want to do
    console.warn(JSON.parse(error));
    // data contains server response
  }

  public sizeLimitExceed(data: any) {
    // do you want to do
    console.warn(JSON.parse(data));
    {
      msg: `The size is max than ${this.viewConfig.maxsize}, now size is ${currentSize}k`
    }
  }

  public onCropperOpened() {
    // do you want to do
    console.warn('It`s opened');
  }

  public onCropperClosed() {
    // do you want to do
    console.warn('It`s closed');
  }
  
  onSaveCallback(file: any) { // if not set - the cropper will upload the file to specified url
    // you can upload your file manyally here
  }
}
```

---
_Source: https://npm.io/package/ngx-cropper-2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._