vue-cropper组件实现手机端头像裁切上传

• 首先安装 npm install vue-cropper
• 然后在需要的页面引入 import VueCropper from vue-cropper

html

<div>
        <div class="wrapper">
            <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="false"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :fixedBox="option.fixedBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            @realTime="realTime"
            ></vueCropper>
            <div class="btn">
                <a>取消</a>
                <a @click="finish('base64')">确定</a>
            </div>
        </div>
        <!-- 生成预览图片-->
        <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
            <div :style="previews.div">
                <img :src="previews.url" :style="previews.img">
            </div>
        </div>
      </div>

css

<style type="text/css">
        body,html{
        height: 100%;
    }
    .box{
        position: relative;
        height: 100%;
    }
    .wrapper{
        position: fixed;
        width: 100%;
        top: 0;
        height: calc(100% - 50px);
    }
    .vue-cropper{
        background: black;
        background-image: none!important;
    }
    .btn{
        height: 50px;
        background: #565656;
        width: 100%;
        padding: 0 15px;
    }
    .btn a{
        color: white;
        font-size: .16rem;
        display: inline-block;
        line-height: 50px;
    }
    .btn a:nth-of-type(1){
        float: left;
    }
    .btn a:nth-of-type(2){
        float: right;
    }

js

export default {
    data: function () {
        return {
            previews: {},
            option: {
                img: '',//裁切图片的地址
                outputSize: 0.6,//裁剪生成图片的质量 0.1-1
                full: false,//是否输出原图比例的截图
                outputType: 'png',//裁剪生成图片的格式
                canMove: true,//图片是否允许滚轮缩放
                fixedBox: true,//固定截图框大小 不允许改变
                original: false,//上传图片按照原始比例渲染
                canMoveBox: false,//截图框能否拖动
                canMove:true,// 上传图片是否可以移动
//              autoCropWidth: 200,
//              autoCropHeight: 200,
                autoCrop:true,//是否默认生成截图框
                // 开启宽度和高度比例
                fixed: true,
                fixedNumber: [1, 1]
            },
        }
    },
    created(){
        this.option.img ='http://ofyaji162.bkt.clouddn.com/touxiang.jpg'
    },
    methods: {
        finish (type) {
            var that =this;
            // 输出
//          var test = window.open('about:blank')
//          test.document.body.innerHTML = '图片生成中..'
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    //var test = window.open('')
                    //test.location.href = window.URL.createObjectURL(data)
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                  //裁切生成的base64图片
                    console.log(data);
                    this.crap=false;
                })
            }
        },
        realTime (data) {
            this.previews = data
        },
    },
    components: {
        vueCropper
    },
}

api

api.png

内置方法

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop()停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale()修改图片大小 正数为变大 负数变小

获取截图信息

this.$refs.cropper.cropW截图框宽度
this.$refs.cropper.cropH截图框高度

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

具体文档见 https://github.com/xyxiao001/vue-cropper