Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/komomoo/vue-slim-cropper
💇♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件
https://github.com/komomoo/vue-slim-cropper
image-clip image-cropper mobile-web vue
Last synced: 3 months ago
JSON representation
💇♀️ A simple and elegant mobile image crop upload component for Vue 2.x | 简洁易用的 vue 移动端图片裁剪上传组件
- Host: GitHub
- URL: https://github.com/komomoo/vue-slim-cropper
- Owner: komomoo
- License: mit
- Created: 2019-07-08T12:02:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-19T09:13:06.000Z (over 3 years ago)
- Last Synced: 2024-06-17T05:28:09.358Z (8 months ago)
- Topics: image-clip, image-cropper, mobile-web, vue
- Language: Vue
- Homepage:
- Size: 15.9 MB
- Stars: 40
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-slim-cropper
English | [简体中文](./README.zh-CN.md)
## 🌰 Example
[Demo](https://komomoo.github.io/vue-slim-cropper/demo/dist/)
[Demo Source Code](https://github.com/komomoo/vue-slim-cropper/blob/master/demo/App.vue)
## 🚀 QuickStart
1. Install
```bash
yarn add vue-slim-cropper # OR npm i -S vue-slim-cropper
```
2. Import
```js
// main.js
import SlimCropper from 'vue-slim-cropper'
Vue.use(SlimCropper)
```
3. Usage. Please refer to the [Demo Source Code](https://github.com/komomoo/vue-slim-cropper/blob/master/demo/App.vue)
```html
```
## 🔌 API
### Props
| Name | Description | Type | Default |
| -------------- | ------------------------------------------------------------ | ------ | --------- |
| src | image URL | String | undefined |
| aspectRatio | width / height ratio | Number | 1 |
| cropperOptions | cropperjs options: https://github.com/fengyuanchen/cropperjs | Object | null |
### Methods
| Name | Description | Parameters |
| -------------- | --------------------------------- | -------------------------------- |
| getCroppedBlob | get the cropped image blob object | type = 'image/jpeg', quality = 1 |
---
😉😘 If it is helpful to you，please encourage me with a ⭐️Star ~
## [Changelog](./CHANGELOG.md)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, komo