-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (158 loc) · 6.9 KB
/
index.html
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="UIC, Computer, CS, CST, Computer Science, 计算机, 联合国际学院, 计算机科学, 计算机科学与技术">
<meta name="description" content="UIC 头像生成器">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title>UIC Head-photo Synthesizer</title>
<link href="https://lib.baomitu.com/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://use.fontawesome.com/0aa367b986.js"></script>
<link rel="stylesheet" href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.row{
margin: 1.5rem 0;
}
.uploadBtn {
position: relative;
text-align: center;
color: white;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.uploadBtn input {
position: absolute;
width: 100%;
max-height: 100%;
line-height: 51px;
font-size: 23px;
opacity: 0;
filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
left: 0px;
top: 0px;
cursor: pointer;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-md-center">
<img src="https://cdn.drjchn.com/img/uichcc/synthesizer.png" id="sampleImg" style="width: 100%; height: 100%">
<img id="imgBox" style="width: 100%; height: 100%">
</div>
<div class="row justify-content-md-center">
<div class="btn btn-primary btn-lg btn-block uploadBtn">Click to Upload
<input type="file" accept="image/*" id="yuchao">
</div>
</div>
<div class="row justify-content-md-center" style="display: none">
<select name="type" id="type" class="custom-select">
<option name="styles" value=1 selected>尖角</option>
<option name="styles" value=2>圆角</option>
</select>g
</div>
<div class="row justify-content-md-center" style="justify-content: center">
<div class="btn-group btn-group-lg" role="typeStyle">
<button type="button" class="btn btn-success active" id="styleOne" onclick="styleSwitch(id)">尖角</button>
<button type="button" class="btn btn-secondary" id="styleTwo" onclick="styleSwitch(id)">圆角</button>
</div>
</div>
<div class="row justify-content-md-center">
<p class="help">推荐选择<b>正方形</b>照片，生成头像后可长按并保存。</p>
</div>
<div align="center" id="foot">
<p id="footer"><i class="fa fa-weixin"></i><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4NDEzMjg3MA==&scene=110#wechat_redirect">UICHCC</a> </p>
</div>
<div style="text-align: center">
<p><a href="http://www.miitbeian.gov.cn/">粤ICP备15011948号-2</a></p>
</div>
<div align="center" class="img_photo" style="display: none;">
<img src="https://cdn.drjchn.com/img/uichcc/UICLogo.png" width="879" height="879">
<img src="https://cdn.drjchn.com/img/uichcc/UICLogo2.png" width="879" height="879">
</div>
</div>
<!--JavaScript Below-->
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
<script>
var wid = 879;
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
c.width = wid;
c.height = wid;
ctx.fillStyle = 'white';
ctx.rect(0, 0, wid, wid);
var data1 = new Array();
for(var i = 0; i < $('.img_photo img').length; i++) {
data1[i]=$('.img_photo img').eq(i).attr('src');
}
var typeSel = document.getElementById("type");
var type = 0;
var imgSrc = "";
typeSel.onchange = function() {
type = parseInt(typeSel.options[typeSel.selectedIndex].value) - 1;
if (imgSrc.length > 0) {
ctx.fill();
var img = new Image();
img.src = imgSrc;
ctx.drawImage(img, 78, 120, wid - 200, wid - 190);
var img2 = new Image();
img2.src = data1[type];
ctx.drawImage(img2, 0, 0, wid, wid);
$('#imgBox').attr('src', c.toDataURL("image/jpeg"));
}
};
$("#yuchao").on('change', function() {
ctx.fill();
var file = new FileReader();
var furl = $('#yuchao')[0].files[0];
file.readAsDataURL(furl);
file.onload = function(e){
var img = new Image();
img.src = e.target.result;
imgSrc = img.src;
var obj = document.getElementById("sampleImg");
obj.style.display= "none";
img.onload = function () {
ctx.drawImage(this, 78, 120, wid - 200, wid - 190);
var img = new Image();
img.src = data1[type];
ctx.drawImage(img, 0, 0, wid, wid);
$('#imgBox').attr('src', c.toDataURL("image/jpeg"));
}
};
});
function styleSwitch(btn) {
var btnOne = document.getElementById('styleOne');
var btnTwo = document.getElementById('styleTwo');
var selectionGroup = document.getElementsByName('styles');
if (btn === "styleOne"){
btnOne.setAttribute("class", "btn btn-success active");
btnTwo.setAttribute("class", "btn btn-secondary");
selectionGroup[0].selected = true;
selectionGroup[1].selected = false;
}else if (btn === "styleTwo"){
btnTwo.setAttribute("class", "btn btn-success active");
btnOne.setAttribute("class", "btn btn-secondary");
selectionGroup[0].selected = false;
selectionGroup[1].selected = true;
}
type = parseInt(typeSel.options[typeSel.selectedIndex].value) - 1;
if (imgSrc.length > 0) {
ctx.fill();
var img = new Image();
img.src = imgSrc;
ctx.drawImage(img, 78, 120, wid - 200, wid - 190);
var img2 = new Image();
img2.src = data1[type];
ctx.drawImage(img2, 0, 0, wid, wid);
$('#imgBox').attr('src', c.toDataURL("image/jpeg"));
}
}
</script>
</body>
</html>