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,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
$ npm install vue-crop-image-mobile --saveyarn
$ yarn add vue-crop-image-mobile --saveCDN
Link: https://unpkg.com/vue-crop-image-mobile@version/dist/crop-image-mobile.js (version is important)
Usage
use in Vue-template.
import Vue from 'vue'
import cropImageMobile from 'vue-crop-image-mobile'
Vue.use(cropImageMobile)It's used in template like this.
<template>
<div id="app">
<div class="cropBar">
<div class="showImage">
<img :src="imageCorpUrl" alt="" width="100%" height="100%">
</div>
<button @click="uploadImage" class="upload">上传图片</button>
<button @click="cropImage" class="corpBtn">裁剪</button>
</div>
<input type="file" @change="fileCb" class="uploadInput" ref="uploadInput">
<div class="cropComp">
<crop-image-mobile
:imageFile="file"
:layerZIndex="20170424"
:layerOpacity="1"
layerColor="#000"
:autoCompress="false"
:quality="0.7"
ref="cropImageMobile" />
</div>
</div>
</template>
<script>
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();
}
}
};
</script>use in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>vue-crop-image-mobile</title>
</head>
<body>
<div id="app">
<div class="cropBar">
<div class="showImage">
<img :src="imageCorpUrl" alt="" width="100%" height="100%">
</div>
<button @click="uploadImage" class="upload">上传图片</button>
<button @click="cropImage" class="corpBtn">裁剪</button>
</div>
<input type="file" @change="fileCb" class="uploadInput" ref="uploadInput">
<div class="cropComp">
<crop-image-mobile
:image-file="file"
:layer-zIndex="20170424"
:layer-opacity="1"
layer-color="#000"
:auto-compress="false"
:quality="0.7"
ref="cropImageMobile" />
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/crop-image-mobile@version/dist/crop-image-mobile.js"></script>
</body>
<script>
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();
}
}
})
</script>
</html>example
an example is provided for reference and follow the steps below.
git clone https://github.com/RedJue/vue-crop-image-mobile.git cd vue-crop-image-mobile
npm install
npm run devyou 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：
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.