Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redjue/vue-crop-image-mobile
cut the picture for the mobile end.
https://github.com/redjue/vue-crop-image-mobile
crop-image mobile vue
Last synced: 3 months ago
JSON representation
cut the picture for the mobile end.
- Host: GitHub
- URL: https://github.com/redjue/vue-crop-image-mobile
- Owner: RedJue
- License: mit
- Created: 2018-04-20T09:35:05.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-05T08:53:12.000Z (almost 6 years ago)
- Last Synced: 2024-10-02T13:46:21.951Z (4 months ago)
- Topics: crop-image, mobile, vue
- Language: Vue
- Size: 15.5 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-crop-image-mobile
a mobile end cropping plug-in is based on vue.
## Introduction
vue-crop-image-mobile is a lightweight mobile end clipping plug-in.it is based on [Vue.js](https://github.com/vuejs/vue),and very easy to use. Support UMD,so not only for vue templates, but also for HTML.
the plugin also fixes IOS photo flip and is more friendly.
## npm
Link: [https://www.npmjs.com/package/vue-crop-image-mobile](https://www.npmjs.com/package/vue-crop-image-mobile)
```bash
$ npm install vue-crop-image-mobile --save
```
## yarn
```bash
$ yarn add vue-crop-image-mobile --save
```
## CDN
Link: [https://unpkg.com/vue-crop-image-mobile@version/dist/crop-image-mobile.js](https://unpkg.com/vue-crop-image-mobile@version/dist/crop-image-mobile.js) (version is important)
## Usage
use in Vue-template.
```javascript
import Vue from 'vue'
import cropImageMobile from 'vue-crop-image-mobile'
Vue.use(cropImageMobile)
```
It's used in template like this.
```Html
![]()
上传图片
裁剪
export default {
name: "App",
data() {
return {
file: "",
imageCorpUrl: ""
};
},
methods: {
fileCb(e) {
this.file = e.target.files[0];
},
cropImage() {
this.$refs.cropImageMobile.cropImage(url => (this.imageCorpUrl = url));
},
uploadImage() {
this.$refs.uploadInput.click();
}
}
};
```
use in HTML.
```Html
vue-crop-image-mobile
![]()
上传图片
裁剪
new Vue({
el: '#app',
data() {
return {
file: "",
imageCorpUrl: ""
};
},
methods: {
fileCb(e) {
this.file = e.target.files[0];
},
cropImage() {
this.$refs.cropImageMobile.cropImage(url => (this.imageCorpUrl = url));
},
uploadImage() {
this.$refs.uploadInput.click();
}
}
})
```
## example
an example is provided for reference and follow the steps below.
```Bash
git clone https://github.com/RedJue/vue-crop-image-mobile.git
```
```bash
cd vue-crop-image-mobile
npm install
npm run dev
```
you can also view it on the mobile.
## configuration
| props | type | description | default |
| :-----------: | :-------------: | :--------------------------------------: | :-----: |
| image-file | File | the image flow | null |
| layer-zIndex | Number | layer of zindex | 999 |
| layer-opacity | [Number,String] | layer of opacity | 1 |
| layer-color | String | layer of color | #000 |
| auto-compress | Boolean | Whether to open automatic compression. | true |
| quality | [Number,String] | The compression quality，automatically compressed to false when enabled. | 0.7 |
instance methods：
```javascript
cropImage(callback(url,blob))
```
## rendering
## Online
you can scan the qr code below to preview.
online url https://redjue.cn/vue-crop-image-mobile/
## License
MIT.