Vue怎么實現(xiàn)裁切圖片功能

今天小編給大家分享一下Vue怎么實現(xiàn)裁切圖片功能的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

效果：

1）、安裝 vue-cropper 

npm install vue-cropper

2）、編寫 .VUE 文件 cropper.vue 應(yīng)為項目本身使用 mui 

<template>
    <div>
        <div class="mui-fullscreen">
 
            <div class="top"  v-on:click="onBack()">
                <img src="../assets/img/payMent/fanhui@2x.png" >
                <p >實名認(rèn)證</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,
                //裁剪組件的基礎(chǔ)配置option
                option: {
                    img: '', // 裁剪圖片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 1, // 裁剪生成圖片的質(zhì)量
                    outputType: 'jpeg', // 裁剪生成圖片的格式
                    canScale: false, // 圖片是否允許滾輪縮放
                    autoCrop: true, // 是否默認(rèn)生成截圖框
                    autoCropWidth: 800, // 默認(rèn)生成截圖框?qū)挾?
                    autoCropHeight: 500, // 默認(rèn)生成截圖框高度
                    fixedBox: false, // 固定截圖框大小 不允許改變
                    fixed: true, // 是否開啟截圖框?qū)捀吖潭ū壤?
                    fixedNumber: [16, 10], // 截圖框的寬高比例
                    full: false, // 是否輸出原圖比例的截圖
                    canMoveBox: true, // 截圖框能否拖動
                    original: false, // 上傳圖片按照原始比例渲染
                    centerBox: true, // 截圖框是否被限制在圖片里面
                    infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框?qū)捀?
                },
            }
        },
        components: {
            VueCropper
        },
        methods: {
            //放大/縮小
            changeScale(num) {
                console.log('changeScale')
                num = num || 1;
                this.$refs.cropper.changeScale(num);
            },
            //坐旋轉(zhuǎn)
            rotateLeft() {
                console.log('rotateLeft')
                this.$refs.cropper.rotateLeft();
            },
            //右旋轉(zhuǎn)
            rotateRight() {
                console.log('rotateRight')
                this.$refs.cropper.rotateRight();
            },
            // 實時預(yù)覽函數(shù)
            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%;
    }
 
    /*     .mui-fullscreen {
        background: #F2F2F2;
        top: 0rem;
        bottom: 0rem;
    } */
</style>

以上就是“Vue怎么實現(xiàn)裁切圖片功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。