master

分支 (1)

管理

管理

master

beautyPhoto
/
uploadPhoto2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>编辑封面</title>
    <!-- 标注网页的作者 -->
    <meta name="author" content="[email protected]">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/styleU.css"/>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/cropbox.js"></script>
    <script>
        $(document).ready(function(){
            var H=$('#content li').width(),
                    oMaimg=$('#main-img'),
                    Maimg=$('#main-img').get(0);
            $('#content li').each(function(i){
                $(this).css('height',H);
                var index=$('#content li').index(this);

                $(this).on('touchstart',function(){
                    $('.l-cover').each(function(i){
                        $('.l-cover').eq(i).css('display','none');
                        $('.l-cover').eq(index).css('display','block');
                    });

                    $('#main-img').attr('src',$('#content img').eq(index).attr('src'));
                });
            });

            $('.btn').on('touchstart',function(){
                $(this).css('display','none');
                $('html,body').scrollTop(0);
                $('.shadow,.cover,.ok').css('display','block');
                makePhoto();
            });
            $('.ok').on('touchstart',function(){
//                resizeImage();
                crop();
            });

            var makePhoto=function(){
                var s=1;
                var oldS=0;
                document.addEventListener('touchstart', function(ev){
                    oldS=s;
                    function getS(ev){
                        var x1=ev.touches[0].pageX;
                        var y1=ev.touches[0].pageY;

                        var x2=ev.touches[1].pageX;
                        var y2=ev.touches[1].pageY;

                        var a=x1-x2;
                        var b=y1-y2;
                        var c=Math.sqrt(a*a+b*b);

                        return c;
                    }

                    if(ev.touches.length==1){
                        var disX=ev.touches[0].pageX;
                        var disY=ev.touches[0].pageY;
                    }
                    if(ev.touches.length==2){
                        var downS=getS(ev);
                    }
                    document.addEventListener('touchmove', function(ev){
                        if(ev.touches.length==2){
                            s=oldS*getS(ev)/downS;
                            var width=oMaimg.width(),
                                    height=oMaimg.height();
                            oMaimg.css({'width':getS(ev),'height':getS(ev)});
                            ev.preventDefault();
                        }
                        if(ev.touches.length==1){
                            var x=ev.touches[0].pageX-disX;
                            var y=ev.touches[0].pageY-disY;
                            oMaimg.css('-webkit-transform','translate('+x+'px,'+y+'px)');
                            ev.preventDefault();
                        }
                    }, false);

                }, false);

                    },
//                    resizeImage = function() {
//                        var resize_canvas = document.createElement('canvas');
//                            resize_canvas.width = oMaimg.width();
//                            resize_canvas.height = oMaimg.height();
//                            resize_canvas.getContext('2d').drawImage(oMaimg.src, 0, 0, oMaimg.width(), oMaimg.height());
//                        oMaimg.attr('src', resize_canvas.toDataURL("image/png"));
//                    },
                    crop = function() {
                        var crop_canvas,
                                left = 0,
                                top = 0,
                                width= 300,
                                height=300;

                        crop_canvas = document.createElement('canvas');
                        crop_canvas.width = width;
                        crop_canvas.height = height;
                        crop_canvas.getContext('2d').drawImage(Maimg, left, top, width, height, 0, 0, width, height);
                        window.open(crop_canvas.toDataURL("image/png"));
                    };

        });
    </script>
</head>
<body>
<div class="container">
    <div id="title">
        <input type="text" placeholder="请在此输入标题" class="title"/>
    </div>
    <div class="change-cov">
            <div class="shadow" style="display: none"></div>
        <img src="img/p2.jpg" alt="" id="main-img"/>
        <div class="btn">编辑封面</div>
        <p class="hint">点击图片调整封面</p>
        <button class="ok" style="display: none;">确定</button>
    </div>

    <ul class="content" id="content">
        <div class="cover"></div>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l1.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l2.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l3.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l4.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l5.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l6.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l7.jpg" alt=""/></div></li>
        <li><div><span class="l-cover" style="display: none;"></span><img src="img/limg/l8.jpg" alt=""/></div></li>
    </ul>
    <div id="main">
        <div class="next">下一步</div>
    </div>

</div>

</body>
</html>