# @devenvy/ngx-cropperjs

> Simple Cropper.js wrapper/plugin for angular

Latest version **0.0.2** (published 2023-02-10) · 0 weekly downloads

## Install

```sh
npm install @devenvy/ngx-cropperjs
pnpm add @devenvy/ngx-cropperjs
yarn add @devenvy/ngx-cropperjs
bun add @devenvy/ngx-cropperjs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-02-10 |
| First published | 2022-03-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ryan-morris |

## Links

- npm: https://www.npmjs.com/package/@devenvy/ngx-cropperjs
- Repository: https://github.com/devenvy/ngx-cropperjs
- Issues: https://github.com/devenvy/ngx-cropperjs/issues
- npm.io page: https://npm.io/package/@devenvy/ngx-cropperjs

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.2 (latest) — 2023-02-10
- 0.0.1 — 2022-03-21

## README

# Angular Cropper.js Wrapper

This is meant to be a very simple wrapper for [Cropper.js](https://fengyuanchen.github.io/cropperjs/)



### Building the library


```
ng build lib
```

### Running the demo app

```
ng build lib --watch   # (watch is optional, to auto rebuild while developing)
ng serve demo
```

### Installing and usage

```
npm install cropperjs --save
npm install @devenvy/ngx-cropperjs --save
```


#### Add styles to `angular.json`

```
"yourApp": {
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/cropperjs/dist/cropperjs.css"
        ]
      }
    }
  }
}
```

#### Load the module for your app:

```
import { CropperModule } from '@devenvy/ngx-cropperjs';

@NgModule({
  ...
  imports: [
    ...
    CropperModule
  ]
})
```

#### Use it in your HTML template:

```
<ngx-cropper
  source="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
  [options]="options">
</ngx-cropper>
```


#### Properties

| property  | value                                                                      |
|-----------|----------------------------------------------------------------------------|
| source    | the image source, can be a url or base64 data url                          |
| options   | See [Cropper.js Options](https://github.com/fengyuanchen/cropperjs#options)|

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