【分享】头像类裁剪上传

夜深了，分享个头像类的裁剪上传，代码写的比较啰嗦。
虽然说用jquery渲染力差，没办法，还是用了。然后借助cropper来完成裁剪

<script src="plugin/avatar/js/jquery.min.js"></script>  
<script src="plugin/avatar/js/cropper.js"></script>  
<link href="plugin/avatar/css/cropper.css" rel="stylesheet">

照片容器

<a href="#picture"><div id="changeAvatar"></div></a>

裁剪照片的容器（样式就自己写了）

<div id="showEdit">  
        <header class="mui-bar mui-bar-nav mui-nav-bg" style="background:none; position:absolute; top:0;">  
            <a class="mui-icon iconfont icon-roundclosefill mui-pull-left" style="color:#ffffff; font-size:36px;" onclick="closeEdit();"></a>  
            <a class="mui-icon iconfont icon-roundcheckfill mui-pull-right" style="color:#ffffff; font-size:36px;" onclick="confirm();"></a>  
        </header>  
        <div id="report"></div>  
    </div>

下面就很简单了，调用下相机和相册选择图片。然后加入cropper的几行代码就搞定了

//拍照  
function getImage() {  
    var cmr = plus.camera.getCamera();  
    cmr.captureImage( function (p) {  
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {      
            var localurl = entry.toLocalURL();//  
            $("#report").html('<img src="'+localurl+'">');  
            cutImg();  
            mui('#picture').popover('toggle');  
        });  
    });  
}  
//相册选取  
function galleryImgs(){  
    plus.gallery.pick( function(e){  
        $("#report").html('<img src="'+e.files[0]+'">');  
        cutImg();  
        mui('#picture').popover('toggle');  
    }, function ( e ) {  
        //outSet( "取消选择图片" );  
    },{filter:"image",multiple:true});  
}

照片裁剪类：

function cutImg(){    
    $("#showEdit").fadeIn();  
    var $image = $('#report > img');  
    $image.cropper({  
      aspectRatio: 1 / 1,  
      autoCropArea: 0.8  
    });  
}

确定裁剪并上传(base64)

function confirm(){  

    $("#showEdit").fadeOut();  
    var $image = $('#report > img');  
    var dataURL = $image.cropper("getDataURL");  
    $("#changeAvatar").html('<img src="'+dataURL+'" />');  
}  

function postAvatar() {  

    var $image = $('#report > img');  
    var dataURL = $image.cropper("getDataURL");  
    var data = {  
            base64: dataURL  
    };  
    $.post(url,data,function(data){  
        //这里就自己写了哈  
    });  
};

效果