# vue-component-image-cropper

> This component is in beta phase.

Latest version **0.1.9** (published 2020-12-29) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install vue-component-image-cropper
pnpm add vue-component-image-cropper
yarn add vue-component-image-cropper
bun add vue-component-image-cropper
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2020-12-29 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| Author | Raúl Caro Pastorino |
| Maintainers | fryntiz |
| Keywords | vue, component, image, crop, cropper |

## Links

- npm: https://www.npmjs.com/package/vue-component-image-cropper
- Repository: https://gitlab.com/fryntiz/vue-component-image-cropper
- Homepage: https://gitlab.com/fryntiz/vue-component-image-cropper/-/blob/master/README.md
- Issues: https://gitlab.com/fryntiz/vue-component-image-cropper/-/issues
- npm.io page: https://npm.io/package/vue-component-image-cropper

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [rxjs](https://npm.io/package/rxjs.md) ^6.6.3
- [axios](https://npm.io/package/axios.md) ^0.21.1
- [vue-rx](https://npm.io/package/vue-rx.md) ^6.2.0
- [vue-axios](https://npm.io/package/vue-axios.md) ^3.2.0
- [vuejs-clipper](https://npm.io/package/vuejs-clipper.md) ^3.1.0

## 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

- 0.1.9 (latest) — 2020-12-29
- 0.1.8 — 2020-12-28
- 0.1.7 — 2020-12-28
- 0.1.6 — 2020-12-28
- 0.1.5 — 2020-12-28
- 0.1.4 — 2020-12-28
- 0.1.3 — 2020-12-28
- 0.1.2 — 2020-12-23
- 0.1.1 — 2020-12-21
- 0.1.0 — 2020-12-21

## README

# Vue Image Cropper (WIP status)

This component is in beta phase.

Will reach version 1.0.0 when you have an acceptable state for use.

---

This component helps cut out images by maintaining the proportions and leaving it in the size established based on the width (eg: 150px, 400px, 600px) 

Also allows to store the result on base64 within an input with the name we predefined or upload it to an API.

---

![Previsualización 1](https://gitlab.com/fryntiz/vue-component-image-cropper/-/raw/master/image-preview-1.png)
![Previsualización 2](https://gitlab.com/fryntiz/vue-component-image-cropper/-/raw/master/image-preview-2.png)

---

Este componente ayuda a recortar imágenes manteniendo las proporciones y dejándola en el tamaño establecido en base al ancho (EJ: 150px, 400px, 600px)

Además permite almacenar el resultado en base64 dentro de un input con el nombre que predefinamos o subirlo a una api.


## Features and Work In Progress

- [x] Set start image path (prop: image_path)
- [x] Set preview rounded (prop: rounded)
- [x] Set width of result (prop: width)
- [x] Set preview width (prop: preview_width)
- [x] Set preview input name (prop: input_name)
- [x] Set Aspect Ratio 1, 1/2, 1/4, 16/9, 21/9... (prop: aspect_ratio)
- [x] Set API url (prop: api_url)
- [x] Set API Token Bearer (prop: api_token), only if you need it.
- [x] Set API resource id to related image (prop: api_id), only if you need it.
- [x] Set image name for alt and title (prop: name), optional.
- [x] Upload to API → Experimental, for debug.
- [x] Set enable API upload
- [x] Set csrf token to API upload (prop: csrf_token)
- [ ] Spinner while uploading the image
- [ ] Set Lazy Image path

## Plain Html Project

```html
<script src="https://unpkg.com/vue"></script>
<script src="./CropperImage.umd.js"></script>

<div id="app">
  <v-cropper-image 
    preview_width="150"
    image_path="./images/example.jpg"
    aspect_ratio="1/4"
    input_name="user_avatar"
    width="150"
    ></v-cropper-image>
</div>

<script>
new Vue({
  components: {
    "v-cropper-image": CropperImage
  }
}).$mount('#app')
</script>
```

## Laravel or JS Project

```html
<v-cropper-image 
    preview_width="150"
    image_path="./images/example.jpg"
    aspect_ratio="1/4"
    input_name="user_avatar"
    width="150"
    ></v-cropper-image>
```

```js
require('vue-component-image-cropper/dist/CropperImage.umd.min.js');

const app = new Vue({
    el: '#app',
    components: {
        'v-cropper-image': CropperImage
    }
});
```

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