图片拖动旋转缩放裁剪

引入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);  
            }