圖片拖動旋轉縮放裁剪

引入css文件

<link rel="stylesheet" type="text/css" href="css/cropper.css"/>

引入js文件

<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
//手勢
<script src="resources/hammer.js" type="text/javascript" charset="utf-8"></script>
//裁剪
<script src="resources/cropper.js" type="text/javascript" charset="utf-8"></script>
<script src="resources/moveImg_crop.js" type="text/javascript" charset="utf-8"></script>

頁面佈局
把要裁剪的圖片用一個div包住

<!-- 裁剪頁面 -->
<div class="" id="mycontainer" style="width: 100%;height: 100%;">
<!--要裁剪的圖片-->
    <img id="cropimg" class="crop-img" src="resources/img/touxiang.jpg">
</div>
<div class="crop-tool">
    <div class="btn cancel" >取消</div>
    <div class="btn sure" id="crop-button">確定</div>
</div>
<img src="" id="crop-result" style="position: absolute;top: 0;left: 0;"/>

在頁面加載完之後調用

        var data = {
            pan: true,//移動
            rotate: true,//旋轉，如果不需要監聽旋轉事件，設爲false
            pinch: true,//縮放
            aspectRatio:1/1,      //要裁剪的區域的寬高比
            autoCropArea: 0.5,    //0~1   要裁剪的區域的寬度（0.5就是50%）

        }
//傳入包住圖片的div的id，要裁剪的圖片的id，點擊裁剪的按鈕的id，可以在回調函數得到裁剪後圖片的路徑
        moveImg('#mycontainer','#cropimg','#crop-button', data,function(croppedCanvas){
            $('#crop-result').attr('src',croppedCanvas.toDataURL('image/png', 1));
        });

---

調用微信的圖片查看接口

（只能進行縮放）
調用jweixin.js，
urls：圖片列表
current：當前圖片

if(WeixinJSBridge){
                WeixinJSBridge.invoke("imagePreview",{
                    "urls": [this.src],
                    "current": this.src
                });
            }else{
                document.addEventListener("WeixinJSBridgeReady",function(){
                  WeixinJSBridge.invoke("imagePreview",{
                    "urls":[this.src],
                    "current": this.src
                    })
                }, false);  
            }