https://github.com/raupulus/vue-component-image-cropper
Componente para recortar y seleccionar el área resultante de una imagen pudiendo así quedar en las proporciones que se necesite. Mirror de https://gitlab.com/raupulus/vue-component-image-cropper
https://github.com/raupulus/vue-component-image-cropper
component crop crop-image hacktoberfest image image-crop image-cropper vue vuejs
Last synced: about 1 year ago
JSON representation
Componente para recortar y seleccionar el área resultante de una imagen pudiendo así quedar en las proporciones que se necesite. Mirror de https://gitlab.com/raupulus/vue-component-image-cropper
- Host: GitHub
- URL: https://github.com/raupulus/vue-component-image-cropper
- Owner: raupulus
- License: gpl-3.0
- Created: 2020-10-11T18:34:17.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-19T14:37:30.000Z (over 3 years ago)
- Last Synced: 2025-04-02T18:52:44.404Z (over 1 year ago)
- Topics: component, crop, crop-image, hacktoberfest, image, image-crop, image-cropper, vue, vuejs
- Language: Vue
- Homepage:
- Size: 1.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
---
---
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
## Dependencies
- axios & axios-vue
## Plain Html Project
```html
new Vue({
components: {
"v-cropper-image": CropperImage
}
}).$mount('#app')
```
## Laravel or JS Project
```html
```
```js
require('vue-component-image-cropper/dist/CropperImage.umd.min.js');
const app = new Vue({
el: '#app',
components: {
'v-cropper-image': CropperImage
}
});
```