Ahu90/index.html at master · StKelen/Ahu90 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>安徽大学90周年校庆头像生成器</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入Cropper -->
    <link href="https://cdn.bootcss.com/cropper/4.0.0-alpha/cropper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/cropper/4.0.0-alpha/cropper.min.js"></script>
    <!-- 引入BootStrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入自己的CSS和JS -->
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="Js/main.js"></script>
</head>

<body class="center-block">
<div class="container-fluid">
    <div class="row center-block">
        <img src="images/header.png" alt="安徽大学90周年校庆" class="img-responsive center-block">
        <header><img src="images/title.png" alt="头像模板列表" class="center-block"></header>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <button type="button" class="btn avatar-selection" style="background-image:url('images/1.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/2.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/3.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/4.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/5.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/6.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/7.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/8.png')"></button>
            <button type="button" class="btn avatar-selection" style="background-image:url('images/9.png')"></button>
        </div>
        <div class="col-xs-12 center-block displayNone" id="avatar-preview">
            <div class="col-xs-5 center-block" style="float:left">
                <label id="input-image" class="btn-self" onclick="initCropper()">
                    <span>上传图片</span>
                    <input type="file">
                </label>
                <button onclick="CreateAvatar()" class="btn-self">合成头像</button>
            </div>
            <div class="col-xs-4" style="float:right" id="preview-area">
                <div id="preview-avatar"></div>
                <img src="#" id="selected-avatar" class="img-responsive">
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="helper displayNone" id="helper-cropper">
                <h1>裁剪框</h1>
                <ul>
                    <li>双指操作（或使用鼠标滚轮）以缩放图片</li>
                    <li>在裁剪区域外滑动以移动页面</li>
                </ul>
            </div>
            <div>
                <img src="" id="UploadAvatar" crossorigin="anonymous">
            </div>
        </div>
        <!-- 通过canvas输出图片 -->
        <canvas id="CreatedAvatar" width="640px" height="640px" class="displayNone"></canvas>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="helper displayNone" id="helper-result">
                <h1>安大90周年校庆纪念头像</h1>
                <p>请长按下图保存</p>
            </div>
            <img src="#" id="result" class="displayNone center-block" height="150px" width="150px">
        </div>
    </div>
</div>

<footer>
    <img src="images/footer.png" alt="安徽大学建校90周年" class="center-block">
    <div id="copyright">
        <p><b style="color: #314483">安徽大学官方微信</b>出品</p>
        <p>Powered by<a href="https://stkalen.tk/" style="color: #314483"> <b>极战の窝</b></a></p>
        <p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold;color: #314483">Coding Pages</a></p>
    </div>
</footer>
</body>

</html>