Jquery切割头像

来源：互联网发布：linux pvdispaly 编辑：程序博客网时间：2024/05/05 00:21

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>

                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>