Vue怎么实现裁切图片功能

今天小编给大家分享一下Vue怎么实现裁切图片功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

效果：

1）、安装 vue-cropper 

npm install vue-cropper

2）、编写 .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怎么实现裁切图片功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。