一、如何安装
cnpm i vue-cropper --save组件内调用
import { VueCropper } from 'vue-cropper'
components: { VueCropper
}二、使用示例
<template> <div class="cropper-wrapper"> <div class="info-groups"> <label class="btn btn-orange" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;">选择图片</label> <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)"> <input type="button" class="oper" value="+" title="放大" @click="changeScale(1)"> <input type="button" class="oper" value="-" title="缩小" @click="changeScale(-1)"> <input type="button" class="oper" value="↺" title="左旋转" @click="rotateLeft"> <input type="button" class="oper" value="↻" title="右旋转" @click="rotateRight"> <input type="button" class="oper" value="↓" title="下载" @click="down('blob')"> <input type="button" class="btn btn-blue" value="上传头像" @click="finish('blob')"> </div> <div> <div class="cropper-content"> <div class="cropper"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" :fixedNumber="option.fixedNumber" @realTime="realTime" @imgLoad="imgLoad" ></vue-cropper> </div> <div class="show-preview"> <div :style="previews.div" class="preview"> <img :src="previews.url" :style="previews.img"> </div> </div> </div> </div> </div></template><script> import { VueCropper } from 'vue-cropper' console.log(VueCropper) // import Api from '@/js/api.js' //接口url配置文件 export default { components: { VueCropper }, data() { return { headImg:'', //剪切图片上传 crap: false, previews: {}, option: { img: '', outputSize:1, //剪切后的图片质量（0.1-1） full: false,//输出原图比例截图 props名full outputType: 'png', canMove: true, original: false, canMoveBox: true, autoCrop: true, autoCropWidth: 160, autoCropHeight: 160, fixedBox: true, fixedNumber: [16, 9] }, fileName:'', //本机文件地址 downImg: '#', imgFile:'', uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名） } }, mounted() { console.log(this.$refs.cropper) }, methods: { //放大/缩小 changeScale(num) { console.log('changeScale') num = num || 1; this.$refs.cropper.changeScale(num); }, //坐旋转 rotateLeft() { console.log('rotateLeft') this.$refs.cropper.rotateLeft(); }, //右旋转 rotateRight() { console.log('rotateRight') this.$refs.cropper.rotateRight(); }, //上传图片（点击上传按钮） finish(type) { console.log('finish') let _this = this; let formData = new FormData(); // 输出 if (type === 'blob') { this.$refs.cropper.getCropBlob((data) => { let img = window.URL.createObjectURL(data) this.model = true; this.modelSrc = img; formData.append("file", data, this.fileName); // this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}}) // .then((response)=>{ // var res = response.data; // if(res.success == 1){ // $('#btn1').val(''); // _this.imgFile = ''; // _this.headImg = res.realPathList[0]; //完整路径 // _this.uploadImgRelaPath = res.relaPathList[0]; //非完整路径 // _this.$message({ //element-ui的消息Message消息提示组件 // type: 'success', // message: '上传成功' // }); // } // }) }) } else { this.$refs.cropper.getCropData((data) => { this.model = true; this.modelSrc = data; }) } }, // 实时预览函数 realTime(data) { console.log('realTime') console.log(data) this.previews = data }, //下载图片 down(type) { console.log('down') var aLink = document.createElement('a') aLink.download = 'author-img' if (type === 'blob') { this.$refs.cropper.getCropBlob((data) => { this.downImg = window.URL.createObjectURL(data) aLink.href = window.URL.createObjectURL(data) aLink.click() }) } else { this.$refs.cropper.getCropData((data) => { this.downImg = data; aLink.href = data; aLink.click() }) } }, //选择本地图片 uploadImg(e, num) { console.log('uploadImg'); var _this = this; //上传图片 var file = e.target.files[0] _this.fileName = file.name; if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种') return false } var reader = new FileReader(); reader.onload =(e) => { let data; if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result } if (num === 1) { _this.option.img = data } else if (num === 2) { _this.example2.img = data } } // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(file); }, imgLoad (msg) { console.log('imgLoad') console.log(msg) console.log(arguments) } }, }</script><style lang="scss">.info-groups { display: flex; justify-content: center; margin: 20px auto; .oper { height:25px; width:25px; border-radius: 50%; font-size:20px; margin:3px 5px; }}.cropper-content{ display: flex; flex-direction: column; justify-content: center; .cropper{ width: 320px; height: 320px; margin: 0 auto; } .show-preview{ flex: 1; display: flex; justify-content: center; .preview{ margin: 30px auto; overflow: hidden; border:1px solid #cccccc; background: #cccccc; } }} </style>三、官方文档 (option配置参考文档)
fengyuanchen.github.io/cropperjs/
四、参考文章
