码迷,mamicode.com
首页 > 其他好文 > 详细

头像裁剪

时间:2018-10-14 20:51:41      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:styles   scala   nbsp   auto   write   port   移动设备   libs   phone   

<!doctype html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no, email=no" />
        <title>支持移动设备触摸手势的jQuery图片裁剪</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/default.css">
        <style>
            #clipArea {
                margin: 20px;
                height: 300px;
            }
            
            #file,
            #clipBtn {
                margin: 20px;
            }
            
            #file {
                margin-left: 50%;
                transform: translateX(-50%);
            }
            
            #clipBtn {
                border: 0;
                background: #2a2020;
                color: white;
            }
            
            #view {
                margin: 0 auto;
                width: 200px;
                height: 200px;
            }
        </style>

    </head>

    <body>

        <div id="clipArea"></div>
        <input type="file" id="file">
        <button id="clipBtn">截取</button>
        <div id="view"></div>

        <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
        <script>
            window.jQuery || document.write(<script src="js/jquery-2.1.1.min.js"><\/script>)
        </script>
        <script src="js/iscroll-zoom.js"></script>
        <script src="js/hammer.js"></script>
        <script src="js/jquery.photoClip.js"></script>
        <script>
            $("#clipArea").photoClip({
                width: 200,
                height: 200,
                file: "#file",
                view: "#view",
                ok: "#clipBtn",
            
            });
        </script>
    </body>

</html>

 

头像裁剪

标签:styles   scala   nbsp   auto   write   port   移动设备   libs   phone   

原文地址:https://www.cnblogs.com/150536FBB/p/9787502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!