Jquery切割头像

jquery.imgareaselect.pack.js下载

源码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       
        <title>剪裁</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>路径自行更改
        <script src="scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
        <style type="text/css">
                em {background: url(http://static.l99.com/skin/default/images/miniblog/hover.png) no-repeat;width:180px;height:60px;position:absolute;top:-85px;left:-85px;text-align:center;padding: 10px 12px 10px;font-style:normal;z-index:2;display:none;}
                em button {background-color:#CCCCCC;border:1px solid #999999;color:#000000;cursor:pointer;font-size:12px;height:20px;width:50px;}
                .adelete{position:relative;}
                div.imgcutDiv {margin: 30px auto;width: 320px;text-align: center;}
                div.imgcutDiv a {margin:0 10px;float:left;}              
        </style>
    </head>
    <body>
        <div class="tagBt_down">
            <div class="con_title">
                        剪裁头像
            </div>
            <div class="con_fill">
                <div class="container">
                            <p>
                                <img id="ferret" src="../Images/pic7.jpg" 路径自行更改
                                    alt="loading IMG ......"
                                    title="image select"
                                    style="float: left; margin-right: 10px;"/>
                            </p>
                </div>

                <div class="clear"></div>
                <div class="imgcutDiv">
                        <form action="cutImg.action" method="post" id="cutImgForm">
                            <input type="hidden" id="cutImageW" name="imgWidth" />
                            <input type="hidden" id="cutImageH" name="imgHeight" />
                            <input type="hidden" id="cutImageX" name="imgTop" />
                            <input type="hidden" id="cutImageY" name="imgLeft" />                                                                                         
                            <input type="hidden" value="avatars.id" name="avatarsId" />                                
                            <a id="img_cut_fb" href="javascript:void(0);" class="bt_22">确认剪裁</a>
                            <a href="javascript:history.go(-1);" class="bt_2">取消剪裁</a>
                        </form>
                </div>
            </div>
        </div>
           <script type="text/javascript">

                var imageW = 537;
                var imageH = 681;
                function preview(img, selection) {
                    showCut(selection.width, selection.height, selection.x1, selection.y1);
                }

                function showCut(w, h, x, y) {
                    var scaleX = 200 / w;
                    var scaleY = 222 / h;
                    $('#ferret + div > img').css({ width: Math.round(scaleX * imageW) + 'px', height: Math.round(scaleY * imageH) + 'px', marginLeft: '-' + Math.round(scaleX * x) + 'px', marginTop: '-' + Math.round(scaleY * y) + 'px' });
                    $('input#cutImageW').val(w);
                    $('input#cutImageH').val(h);
                    $('input#cutImageX').val(x);
                    $('input#cutImageY').val(y);
                }

                $(document).ready(function () {
                    $('<div><img src="../Images/pic7.jpg" style="position: relative;" /></div>')路径自行更改
                    .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '200px', height: '222px' })
                    .insertAfter($('#ferret'));

                    imageW = $('#ferret + div > img').width();
                    imageH = $('#ferret + div > img').height();

                    $("form > a#img_cut_fb").click(function () {
                        if (confirm('确任剪切吗?')) {
                            alert("width: " + $('input#cutImageW').val() + "height: " + $('input#cutImageH').val() + "left: " + $('input#cutImageX').val() + "top: " + $('input#cutImageY').val());
                        }
                    });
                });

                $(window).load(function () {

                    $('img#ferret').imgAreaSelect({ selectionOpacity: 0, minWidth: 90, minHeight: 100, outerOpacity: '0.5', selectionColor: 'blue', aspectRatio: '9:10', x1: 10, y1: 10, x2: 100, y2: 110, onSelectChange: preview });
                    showCut(90, 100, 10, 10);
                });
            </script>
    </body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值