这是一款jQuery点击上传图片，支持旋转、放大、缩小等尺寸调整功能，上传完成对头像图片裁剪代码。
使用方法

在页面引入以下JS文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/iscroll-zoom.js"></script> 
<script type="text/javascript" src="js/hammer.js"></script> 
<script type="text/javascript" src="js/lrz.all.bundle.js"></script> 
<script type="text/javascript" src="js/jquery.photoClip.js"></script>

读取图片信息的Script代码

<script>
$(function(){
    var html = '<div class="boxCen">';
        html += '<div id="clipArea" class="file-clip"></div>';
        html += '<div class="file">';
        html += '<div class="file-btn">点击上传图片</div>';
        html += '<input type="file" class="service-file" id="file">';
        html += '</div>';
        html += '<div class="file-btn" id="clipBtn">裁剪图片</div>';
        html += '<div class="file-btn" id="rotaBtn">选转</div>';
        html += '<div class="file-btn" id="bigImg" >放大</div>';
        html += '<div class="file-btn" id="smallImg">缩小</div>';
        html += '<div class="red">（鼠标滚轮为缩放，每次双击则顺时针旋转90度）</div>';
        html += '</div>';
        html += '<div id="imgHtml" class="clipEnd"></div>'; 
        $('#tt').html(html);
        clip();
          
          
});
  
function clip(){
    $("#clipArea").photoClip({
        size: [200, 200],
        file: "#file",
        ok: "#clipBtn",
        view:"#imgcav",
        rotaBtn:'#rotaBtn',
        bigBtn:'#bigImg',
        smallBtn:'#smallImg',
        outputSize:[200, 200],
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            var img = '<img src="'+dataURL+'">';
            $('#imgHtml').html(img);
        }
    });
}
</script>