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

收藏

分享一款左右旋转的头像插件，而且支持放大镜拖动图片剪切，并且生成两种不同尺寸的图片。

1、请不要问“在不在”之类的问题，有问题直接问！2、学生或暂时没有工作的童鞋，整站资源免费下载！3、￥9.9充值终身VIP会员,整站资源无任何限制下载！5、程序员加油，交流群：782128964 在线 充值

查看演示 下载资源： 124 次

关注微信号获取此Demo视频教程：

下载资源 下载积分： 30 积分

头像旋转和裁剪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();
}