今天小编给大家分享一下Vue怎么实现裁切图片功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
效果：
1）、安装 vue-cropper
npm install vue-cropper2）、编写 .VUE 文件 cropper.vue 应为项目本身使用 mui
<template> <div> <div class="mui-fullscreen"> <div class="top" v-on:click="onBack()"> <img src="../assets/img/payMent/fanhui@2x.png" > <p >实名认证</p> </div> <div > <!-- <img id="image" :src="image" > --> <img src="../assets/img/lobby/youxuanzhuan.png" v-on:click="rotateLeft()" /> <img src="../assets/img/lobby/zuoxuanzhuan.png" v-on:click="rotateRight()" /> <div class="cropperContent"> <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" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" @realTime="realTime"></vue-cropper> </div> <!-- <div > <img :src="preview" /> </div> --> </div> <div class="buttom" v-on:click="onSelect()"> <p >确定</p> </div> <!-- <img :src="preview" /> --> </div> </div></template> <script> import { VueCropper } from 'vue-cropper' export default { data() { return { target: 0, cropperHelp: null, preview: null, //裁剪组件的基础配置option option: { img: '', // 裁剪图片的地址 info: true, // 裁剪框的大小信息 outputSize: 1, // 裁剪生成图片的质量 outputType: 'jpeg', // 裁剪生成图片的格式 canScale: false, // 图片是否允许滚轮缩放 autoCrop: true, // 是否默认生成截图框 autoCropWidth: 800, // 默认生成截图框宽度 autoCropHeight: 500, // 默认生成截图框高度 fixedBox: false, // 固定截图框大小 不允许改变 fixed: true, // 是否开启截图框宽高固定比例 fixedNumber: [16, 10], // 截图框的宽高比例 full: false, // 是否输出原图比例的截图 canMoveBox: true, // 截图框能否拖动 original: false, // 上传图片按照原始比例渲染 centerBox: true, // 截图框是否被限制在图片里面 infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 }, } }, components: { VueCropper }, 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(); }, // 实时预览函数 realTime(data) { //this.previews = data }, imgLoad(msg) { console.log(msg) }, cropImage() { }, onSelect() { this.$refs.cropper.getCropBlob((data) => { //console.log("data===>",data) var img = window.URL.createObjectURL(data); this.$emit("onCutingResoult", { img: img, target: this.target }) }) }, onReset(param) { this.target = param.target this.option.img = param.url this.preview = param.url }, onBack() { this.$emit("onCutingBack") } } }</script> <style scoped> .mui-fullscreen { background: white; } .cropperContent { width: 100%; height: 100%; } </style>以上就是“Vue怎么实现裁切图片功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
