# @ballcat/vue-cropper

> vue image cropper by cropperjs

Latest version **1.0.6** (published 2023-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ballcat/vue-cropper
pnpm add @ballcat/vue-cropper
yarn add @ballcat/vue-cropper
bun add @ballcat/vue-cropper
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-11-08 |
| First published | 2022-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 1 |
| Unpacked size | 32.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hccake |
| Maintainers | hccake |
| Keywords | cropper, vue-cropper, vue-cropperjs, cropperjs |

## Links

- npm: https://www.npmjs.com/package/@ballcat/vue-cropper
- npm.io page: https://npm.io/package/@ballcat/vue-cropper

## Dependencies (1)

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

## Recent versions

- 1.0.6 (latest) — 2023-11-08
- 1.0.5 — 2022-12-19
- 1.0.4 — 2022-06-21
- 1.0.3 — 2022-06-17
- 1.0.2 — 2022-06-17
- 1.0.1 — 2022-06-16

## README

# vue-cropper

A Vue image cropper components by cropperjs.

Github: https://github.com/ballcat-projects/vue-cropper

## Demo

online demo: https://ballcat-projects.github.io/vue-cropper

You can also clone the repository and run the demo locally:

```shell
# clone
git clone https://github.com/ballcat-projects/vue-cropper.git

# enter the folder
cd vue-cropper/example

# install dependency
npm install

# run it
npm run dev
```

## Getting started

### Installation

```npm
npm install @ballcat/vue-cropper
```
or
```yarn
yarn add @ballcat/vue-cropper
```

### Usage

#### Global Registration

```vue
import { createApp } from 'vue';
import App from './App';

import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const app = createApp(App);

app.use(VueCropper).mount('#app');
```

#### Local Registration

```vue
<template>
  <vue-cropper 
      ref="vueCropperRef"
      :src="imgSrc"
      alt="Source Image"
  />
</template>
<script>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  setup() {
    const imgSrc = ref('the image path')
    const vueCropperRef = ref(null);

    onMounted(() => {
      console.log(vueCropperRef.value.getData());
    });

    return {
      imgSrc,
      vueCropperRef
    };
  }
};
</script>
```

or use setup script

```vue
<script setup>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const imgSrc = ref('the image path')
const vueCropperRef = ref(null);

onMounted(() => {
  console.log(vueCropperRef.value.getData());
});
</script>
```

## API

VueCropper props that can be used are divided into two parts, custom and all properties supported by cropperjs

### custom options

| Property       | Description                                 | Type    | Required |
| :------------- | :------------------------------------------ | :------ | :------- |
| src            | origin image src                            | string  | true     |
| imgStyle       | the img element style                       | object  | --       |
| imgCrossOrigin | the img element crossOrigin attribute value | string  | --       |
| alt            | the img element alt attribute value         | boolean | --       |

### Cropperjs options

see [cropperjs document](https://github.com/fengyuanchen/cropperjs/blob/main/README.md)


### custom expose method

| Method  | Description                   | Type       |
|:--------|:------------------------------|:-----------|
| flipX   | flip the picture horizontally | () => void |
| flipY   | flip the picture vertically   | () => void |

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