# vue-cropperjs

> A Vue wrapper component for cropperjs

Latest version **5.0.0** (published 2021-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cropperjs
pnpm add vue-cropperjs
yarn add vue-cropperjs
bun add vue-cropperjs
```

## Health

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

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2021-02-01 |
| First published | 2016-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/vue-cropperjs) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 974 |
| Author | Iftekhar Rifat |
| Maintainers | agontuk |
| Keywords | vue, vuejs, cropper, cropperjs, component |

## Links

- npm: https://www.npmjs.com/package/vue-cropperjs
- Repository: https://github.com/Agontuk/vue-cropperjs
- Homepage: https://github.com/Agontuk/vue-cropperjs#readme
- Issues: https://github.com/Agontuk/vue-cropperjs/issues
- npm.io page: https://npm.io/package/vue-cropperjs

## Dependencies (1)

- [cropperjs](https://npm.io/package/cropperjs.md) ^1.5.6

## Recent versions

- 5.0.0 (latest) — 2021-02-01
- 4.2.0 — 2020-12-10
- 4.1.0 — 2020-04-15
- 4.0.1 — 2019-10-18
- 4.0.0 — 2019-05-26
- 3.0.0 — 2018-12-02
- 2.2.2 — 2018-09-15
- 2.2.1 — 2018-06-01
- 2.2.0 — 2017-11-06
- 2.1.1 — 2017-05-16
- 2.1.0 — 2017-03-16
- 2.0.4 — 2017-02-19
- 2.0.3 — 2017-01-28
- 2.0.2 — 2017-01-20
- 2.0.1 — 2016-12-11
- … 5 more at https://npm.io/package/vue-cropperjs/versions

## README

# vue-cropperjs

A Vue wrapper component for [cropperjs](https://github.com/fengyuanchen/cropperjs).

[![NPM](https://nodei.co/npm/vue-cropperjs.png?downloads=true)](https://nodei.co/npm/vue-cropperjs/)

## Demo

Checkout here **[agontuk.github.io/vue-cropperjs](https://agontuk.github.io/vue-cropperjs/)**

## Installation

```shell
npm install --save vue-cropperjs
```
or
```
yarn add vue-cropperjs
```
> You will also need css & style loader for webpack

# Compatibility
| Vue Version | Package Version |
| ---------- | --------------- |
| 3.x.x      | >=5.0.0         |
| 2.x.x      | 4.2.0           |
| 1.x.x      | 1.0.3           |

## Usage

```js
// Global
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
Vue.component(VueCropper);

// Local
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
  components: { VueCropper}
}

...
<vue-cropper
  ref="cropper"
  :src="imgSrc"
  alt="Source Image"
  @ready="..."
  @cropstart="..."
  @cropmove="..."
  @cropend="..."
  @crop="..."
  @zoom="..."
>
</vue-cropper>
...

this.$refs.cropper.rotate(45);
```

See the [example](https://github.com/Agontuk/vue-cropperjs/tree/master/example) files & [cropperjs](https://github.com/fengyuanchen/cropperjs#cropperjs) documentation

## Options

| Name           | Type     | Required | Description                     |
| -------------- | -------- | -------- | ------------------------------- |
| src            | `string` | --       | Image source                    |
| containerStyle | `object` | --       | Styling for the image container |
| imgStyle       | `object` | --       | Styling for the image           |
| alt            | `string` | --       | Alternate text for the image    |

## Crop related options

See cropperjs [documentation](https://github.com/fengyuanchen/cropperjs#options) for all posible options & methods.

### Renamed Methods

- `relativeZoom` from `zoom`
- `initCrop` from `crop`

## License

MIT

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