一、在使用者資訊頁面上新增popover和觸發事件監聽

<!-- 新增拍照或照片 -->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view" id="pictureFrom">
        <li class="mui-table-view-cell">
            <a href="javascript:void(0);" data-value="0">拍照</a
 
>
        </li>
        <li class="mui-table-view-cell">
            <a href="javascript:void(0);" data-value="1">從相簿選擇</a>
        </li>
    </ul>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#picture"
 
><b>取消</b></a>
        </li>
    </ul>
</div>

長按頭像，彈出上面的popover，選擇拍照還是從相簿選擇

//長按修改頭像
mui('.mui-table-view').on('longtap','.hy-userphoto-row',function(e){
    mui('#picture').popover('toggle');
});

二、新增拍照或照片的監聽

//新增拍照或照片
var camera;
mui('#picture #pictureFrom').on('tap'
 
,'a',function(){
    var value = this.dataset.value;
    if(value==0){//開啟相機
        if(!isValidObject(camera)){
            camera = plus.camera.getCamera();
        }
        camera.captureImage(function(path){
            openScreenshot(path);
        },function(e){
            mui.toast("拍照失敗:" + e.message);
        },{filename:'_doc/userhead/'})
    }else if(value==1){//開啟相簿
        plus.gallery.pick(function(path){
            openScreenshot(path);
        }, function(e){
            mui.toast("相簿選擇照片失敗:" + e.message);
        },{filename:'_doc/userhead/',
            filter:'image',
            multiple:false
        });
    }
});

三、開啟截圖頁面

/**
 * 開啟截圖頁面
 */
var openScreenshot = function(path){
    mui('#picture').popover('toggle');//關閉popover
    if(path.indexOf('_doc/userhead/')>-1){//本地URL路徑轉換成平臺絕對路徑，因為拍照和相簿選擇路徑方式不統一
        path = 'file://'+plus.io.convertLocalFileSystemURL(path);
    }
    mui.openWindow({
        id:'screenshot',
        url:'../screenshot/screenshot.html',
        createNew:true,
        extras:{//把圖片url傳給截圖頁面
            pid:'selfinfo',
            path:path
        },
        show:{
          autoShow:true,//頁面loaded事件發生後自動顯示，預設為true
          aniShow:'slide-in-right'//頁面顯示動畫，預設為”slide-in-right“；
        }
    });
}

四、screenshot.html頁面使用jquery和jquery.Jcrop進行截圖，也是沒有更好的js外掛了，只能用jquery。
新增css

<link rel="stylesheet" href="../../assets/jcrop/css/jquery.Jcrop.min.css" />

新增js

<script type="text/javascript" src="../../assets/jcrop/js/jquery.min.js" ></script>
<script type="text/javascript" src="../../assets/jcrop/js/jquery.Jcrop.min.js" ></script>
<script type="text/javascript" src="../../assets/jcrop/js/jquery.color.js" ></script>

html body的內容：

<header class="mui-bar mui-bar-nav" id="header">
    <div class="mui-pull-left">
        <a class="mui-action-back mui-icon mui-icon-delete">取消</a>
    </div>
    <div class="mui-pull-right">
        <a class="mui-icon mui-icon-save">儲存</a>
    </div>
</header>

<div class="mui-content">
    <img src="" id="cropbox" />
</div>

五、重要的js，初始化頁面:
獲取個人資訊頁面傳來的引數

var self = plus.webview.currentWebview();
var path = self.path;//截圖地址
var pid = self.pid;

初始化外掛：

mui('#cropbox')[0].src = path;
var cropbox = mui('#cropbox')[0];
var imgw = cropbox.width;
var imgh = cropbox.height;
if(height-44>imgh){
    mui('.mui-content')[0].style.paddingTop = ((height-44-imgh)/2+44)+'px';
}

//截圖框
api = jQuery.Jcrop('#cropbox',{
    aspectRatio:1, //選框寬高比,保證是正方形
    allowSelect:false,//允許新選框
    bgOpacity: 0.5,
    bgColor: 'white',
    bgFade: true,
    addClass: 'jcrop-light',
    minSize:[100,100] //選框最小尺寸
});

var size = imgw<imgh?imgw:imgh;
size = Math.floor(size);
var size10=(size.toString().length)*10;
size = Math.floor(size/size10)*size10;
api.setOptions({maxSize:[size,size]});//選框最大尺寸
size = size-100;
var x = (imgw-size)/2;
var y = (imgh-size)/2;
api.setSelect([x,y,x+size,y+size]);
api.ui.selection.addClass('jcrop-selection');

六、點選儲存截圖

//點選儲存截圖
mui('#header').on('tap','.mui-icon-save',function(){
    var ws = api.getWidgetSize();//獲取圖片顯示尺寸，格式為：[w,h]
    var ts = api.tellScaled();//獲取選框的值（介面尺寸）。

    var left = ts.x/ws[0]*100;
    var top = ts.y/ws[1]*100;
    var width = ts.w/ws[0]*100;
    var height = ts.h/ws[1]*100;

    var selfinfo = plus.webview.getWebviewById(pid);
    //執行個人資訊頁面的方法，實現回撥
    selfinfo.evalJS('screenshotReturn(\''+path+'\','+top+','+left+','+width+','+height+')');
    mui.back();
});

七、個人資訊頁面對圖片進行壓縮擷取
真正的截圖工作

/**
 * 截圖完成返回壓縮圖片的方法
 * @param {Object} path
 * @param {Object} top
 * @param {Object} left
 * @param {Object} width
 * @param {Object} height
 */
var screenshotReturn = function(path,top,left,width,height){
    plus.zip.compressImage({
        src:path,//等待截圖的圖片
        dst:'_doc/userhead/usr.jpg',//截圖儲存路徑
        overwrite:true,
        quality:20,
        clip:{
            top:top+'%',
            left:left+'%',
            width:width+'%',
            height:height+'%'
        }
    }, function(e){//壓縮剪裁成功
        var filepath = e.target;//壓縮後的圖片絕對路徑
        var path = plus.io.convertAbsoluteFileSystem(filepath.substring('file://'.length));//壓縮後的圖片本地路徑
        //顯示回頁面上
        mui('#hyPhoto')[0].src = filepath+'?'+Math.random();
        mui('#hyPhoto')[0].setAttribute('data-preview-src',filepath);
        mui('#hyPhoto')[0].dataset.path=path;
        //頭像大圖瀏覽
        var previewImage = mui.getPreviewImage();
        if(isValidObject(previewImage)){
            previewImage.dispose();
        }
        mui.previewImage();
    }, function(e){
        mui.toast('圖片剪裁失敗:'+e.message);
    });
}

這裡用到的大圖瀏覽用到了mui.previewimage.js和mui.zoom.js，晚點可以再寫一篇關於這兩個js的用法。