vue-quick-cropper
A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信,可单指移动双指缩放)
Install
npm install vue-quick-cropper -S
// Introduced in main.js when using vue-cli webpack
import Vue from 'vue';
import VueQuickCropper from 'vue-quick-cropper';
Vue.use(VueQuickCropper)
Use
<!-- Select photos, can be combined with other image upload plugins, in order to get image files --> <!-- 照片裁剪部分 --> 使用 取消
el: '#app' data: imgSrc: "" // 图片数据 visible:false // 剪切框展示 methods: // Get the base64 and binary of the image { console console } // Confirm button { this } // cancel { thisvisible = false } // Select img callback { thisvisible = true const file = etargetfiles0 // Read picture information const reader = ; reader reader { thisimgSrc = readerresult // imgSrc has been acquired, start to initialize the rendered image this$refscropper } } ;
Options
params | type | description | node |
---|---|---|---|
v-bind:imgSrc | String | Picture src | Read by fileReader, See example |
v-bind:imgType | String | Generate image data format | "png","jpeg",default "png" |
v-on:finish | Function | Cut completion callback, return base64 data and binary data | finish(base64,data),See example |
ref.init | Function | Called when imgSrc gets successful | Tell the cropper to render the image,See example |
ref.confirm | Function | Screenshot | Tell the cropper screenshot |
ref.getBase64Url | Function | Return to the base64 of the screenshot | Use by ref |
ref.getData | Function | Return the binary data of the screenshot | Use by ref |
Contact me
QQ:215028726