jQuery头像左右动画旋转并支持裁剪

来源:https://www.sucaihuo.com/js/918.html 2016-08-02 07:11浏览(1812) 收藏

分享一款左右旋转的头像插件,而且支持放大镜拖动图片剪切,并且生成两种不同尺寸的图片。
jQuery头像左右动画旋转并支持裁剪
分类:其它特效 > jQuery插件 难易:高级
查看演示 下载资源: 81 下载资源 下载积分: 26 积分

头像旋转和裁剪html代码

<div class="portrait_left"> 
    <div id="picture">
        <img id="avatar" alt="请上传头像" src="images/Koala_cropped.jpg" />
    </div> 
    <form id="crop_form" method="post" action="."> 
        <!--通过生成尺寸和旋转角度 后台获取尺寸和旋转角度再进行裁剪--> 
        <input id="id_top" type="hidden" name="top" value="90" /> 
        <input id="id_left" type="hidden" name="left" value="61" /> 
        <input id="id_right" type="hidden" name="right" value="201" /> 
        <input id="id_bottom" type="hidden" name="bottom" value="200" /> 
        <input id="rotation" type="hidden" value="0" name="rotation" /> 
    </form> 
    <div class="portrait_revolve"> 
        <div class="revolve_left"></div> 
        <a href="javascript:;" class="revol_left_txt" onclick="avatarrotateleft();">向左旋转</a> 
        <a href="javascript:;" class="revol_right_txt" onclick="avatarrotateright();">向右旋转</a> 
        <div class="revolve_right"></div> 
    </div> 
    <div class="setup_but">
        <button class="baseinf_but1" onclick="submit_avatar();">确定</button>
    </div> 
</div> 
<div class="portrait_right"> 
    <p class="portrait_right_txt">您上传的头像会自动生成小尺寸头像,请注意小尺寸的头像是否清晰</p> 
    <div class="portrait_right_bottom"> 
        <div class="portrait1"> 
            <div id="img_big_preview" class="img_preview">
                <img id="avatar1" alt="头像预览" src="images/Koala_cropped.jpg" style="width:360px;height:360px;margin-left:-117px;margin-top:-44px;" />
            </div> 
            <p>大尺寸头像,180&times;180</p> 
        </div> 
    </div> 
    <div class="portrait2"> 
        <div id="img_small_preview" class="img_preview">
            <img id="avatar2" alt="预览" src="images/Koala_cropped.jpg" style="width: 98px; height: 98px; margin-left: -32px; margin-top: -12px;" />
        </div> 
        <p>中尺寸头像</p> 
        <p>50&times;50</p> 
    </div> 
</div>
$(document).ready(function() {
    function adjust(el, selection) {
        var scaleX = $(el).width() / (selection.width || 1);
        var scaleY = $(el).height() / (selection.width || 1);
        $(el + ' img').css({
            width: Math.round(scaleX * $('#avatar').width()) + 'px',
            height: Math.round(scaleY * $('#avatar').height()) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
        });
    }
    function preview(img, selection) {
        adjust('#img_small_preview', selection);
        adjust('#img_big_preview', selection);
    }
    $('img#avatar').imgAreaSelect({
        aspectRatio: "4:4",
        x1: 60,
        y1: 60,
        x2: 200,
        y2: 200,
        onSelectEnd: function(img, selection) {
            $('#id_top').val(selection.y1);
            $('#id_left').val(selection.x1);
            $('#id_right').val(selection.x2);
            $('#id_bottom').val(selection.y2);
        },
        onSelectChange: preview
    });
});



var value = 0;
function avatarrotateleft() {
    value -= 90;
    $('#avatar').rotate({animateTo: value});
    $('#avatar1').rotate({animateTo: value});
    $('#avatar2').rotate({animateTo: value});
}
function avatarrotateright() {
    value += 90;
    $('#avatar').rotate({animateTo: value});
    $('#avatar1').rotate({animateTo: value});
    $('#avatar2').rotate({animateTo: value});
}
function select_avatar() {
    $('#avatar_id').click();
}
function uploadavatar() {
    $('#avatar_form').submit();
}
function submit_avatar() {
    $('#rotation').val(value);
    alert('修改成功');
    $('#crop_form').submit();
}
评论12
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 11楼
    04-16 16:34
    .***.
    终于找到这个案例了,很需要,谢谢
  • 头像 10楼
    03-12 08:44
     ***巾
    头像裁剪,这个功能很常见啊,mark
  • 头像 9楼
    12-05 16:29
    q***r
    弄不懂啊。。
  • 头像 8楼
    12-23 11:46
    馒***火
    如果更详细一些会更好
  • 头像 7楼
    12-09 10:15
    d***n
    吊吊吊,可能我能力有限没看太明白
  • 头像 6楼
    12-05 08:52
    凌***云
    感觉比较复杂,下来研究一下看看
  • 头像 5楼
    11-11 09:24
    A***彬
    不太会用啊~哎
  • 头像 4楼
    10-15 17:54
    郑***y
    新手,表示不是太会用
    如果更详细一些会更好
  • 头像 3楼
    09-13 08:41
    a***1
    很好用的功能謝謝分享了
  • 头像 板凳
    09-06 15:30
    2***4
    这个我用了啊
1 2