jQuery头像上传调整图片裁剪代码

jQuery头像上传调整图片裁剪代码

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

使用方法
在页面引入以下JS文件

1
2
3
4
5
<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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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>

文件信息:

    1

    发表评论