jquery 头像剪切

最新推荐文章于 2019-06-21 17:16:32 发布

D6元素

最新推荐文章于 2019-06-21 17:16:32 发布

阅读量1.4k

点赞数

分类专栏： jquery 效果文章标签： jquery class function div input javascript

本文链接：https://blog.csdn.net/jiangquan1982/article/details/4294601

版权

jquery 效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html; charset=UTF-8" %>
<!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" />
        <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="http://blog.btbbt.com/attachments/2008/07/1510243_200807062233495.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" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
            <script type="text/javascript" src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.8.min.js"></script>   
            <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="http://blog.btbbt.com/attachments/2008/07/1510243_200807062233495.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>

D6元素

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 头像剪切

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 剪裁 em {background: url(http://static.l99.com/skin/default/
复制链接

扫一扫