头像裁剪的实现

用法

分两个页面，一个页面头像页面，一个是裁剪页面。  
1、在头像页面可以用http://ask.dcloud.net.cn/article/12700这个获取图片地址，把图片地址传给裁剪页面。  
2、在裁剪页面先压缩图片，再用cropper插件进行裁剪操作

原码

第一步源码在上面的地址，  

第二步源码：  
    var $image = $('.port-img > img'); // 获取图片DOM  
    mui.plusReady(function() {  
        self = plus.webview.currentWebview();  
        var imgUrl = self.imgUrl; //获取上个页面传过来的图片地址  

        plus.zip.compressImage({ //压缩图片  
                src:imgUrl,  
                dst:"_doc/b.jpg",  
                overwrite:true,  
                width:"800px",  
                quality:20  
        },function(event) {  
                imgUrl = event.target;  
        },function(error) {  
                mui.toast("图片压缩错误")  
        });  
        $image.attr("src",imgUrl);  

        $image.cropper({ //生成裁剪框  
            aspectRatio: 1 / 1,   
            viewMode: 1, //裁剪框 只能在图片内移动  
            dragMode: "move", //背景移动  
            background: false, //关闭网络背景  
            minCanvasWidth: 100,  
            minCanvasHeight: 100  
        });  

        $("#infoSave").on("tap", function() { // 点击确定保存  
            getImg();  
        })  
    });  

    function getImg() {  
                // 把裁剪的图片转换为base64  
        var imgData64 = $image.cropper("getCroppedCanvas",{width:120,height:120}).toDataURL();  

        localStorage.setItem("CH_IMGDATA", imgData64);  // 我这里存放在本地，以便更新其他地方的头像  
        evalId("myInfo_modify.html", ['getImgData'])  
                mui.back(); // 最后关闭裁剪页面  
    }