图片拖动旋转缩放裁剪

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

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

调用微信的图片查看接口

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