a mobile end cropping plug-in is based on vue.
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.
Link: https://www.npmjs.com/package/vue-crop-image-mobile
$ npm install vue-crop-image-mobile --save$ yarn add vue-crop-image-mobile --saveLink: https://unpkg.com/vue-crop-image-mobile@version/dist/crop-image-mobile.js (version is important)
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>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.
| 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))
you can scan the qr code below to preview.
online url https://redjue.cn/vue-crop-image-mobile/
MIT.