A mobile image cropping upload
A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信，可单指移动双指缩放)
zh-CN中文文档
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
<template> <div id="app"> <div v-if="!visible"> <!-- Select photos, can be combined with other image upload plugins, in order to get image files --> <input ref="file" @change="choiceImg" type="file"> </div> <!-- 照片裁剪部分 --> <div class="main" v-if="visible"> <div class="header"> <div class="button" @click="confirm">使用</div> <div class="button cancel" @click="cancel">取消</div> </div> <div class="content"> <quick-cropper ref="cropper" :img-src="imgSrc" @finish="finish"> </quick-cropper> </div> </div> </div> </template>
export default { el: '#app', data: { imgSrc: "", // 图片数据 visible:false, // 剪切框展示 }, methods: { // Get the base64 and binary of the image finish(base64,data){ console.log(base64,'图片base64') console.log(data,'图片二进制') }, // Confirm button confirm() { this.$nextTick(() => { // Confirm screenshot this.$refs.cropper.confirm() }) }, // cancel cancel(){ this.visible = false }, // Select img callback choiceImg(e) { this.visible = true const file = e.target.files[0] // Read picture information const reader = new FileReader(); reader.readAsDataURL(file) reader.onload = (e) => { this.imgSrc = reader.result // imgSrc has been acquired, start to initialize the rendered image this.$refs.cropper.init() } }, } };
* { margin: 0; padding: 0; } html, body, #app { height: 100%; overflow: hidden; } .item { height: 200px; background: lightgray; border: 2px solid green; overflow: hidden; } .main { height:100%; box-sizing: border-box; padding-top: 44px; } .content { height: 100%; } .header { position: fixed; top: 0; right: 0; height: 44px; width: 100%; background: #303030; } .button { float: right; height: 44px; line-height: 44px; font-size: 14px; margin-right: 15px; color: green; } .cancel{ float:left; margin-left:15px; } 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 |
QQ:215028726
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
