-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·192 lines (176 loc) · 7.22 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>배고픕니다 짤 생성기</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="배고픕니다 짤 생성기">
<meta property="og:type" content="website">
<meta property="og:description" content="배고픕니다 짤을 손쉽게 만드세요!">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<style type="text/css">
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
body, p, div {
font-family: 'Noto Sans KR', sans-serif;
}
.spacer {
height: 15px;
}
.canvascontainer {
width: 100%;
height: 1px;
opacity: 0;
overflow: hidden;
}
.file {
display: none;
}
canvas {
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="spacer"></div>
<h1>배고픕니다 짤 생성기</h1>
<hr>
<input class="file" type="file" onchange="load(this)" id="file">
<button class="btn btn-primary btn-block" onclick="$('#file').click()">사진 선택</button>
<div class="spacer"></div>
<input class="form-control" type="text" placeholder="배고픈 사람" id="name" onchange="load_txt()">
<div class="spacer"></div>
<input class="form-control" type="text" placeholder="두번째 줄 (기본값: 배고픕니다)" id="second" onchange="load_txt()">
<div class="spacer"></div>
<div class="canvascontainer">
<canvas id="canvas" class="col-12"></canvas>
</div>
<img alt="" src="hungry.jpg" id="canvasimg" width="100%">
<hr>
<ul class="list-group">
<li class="list-group-item">아이폰, 아이패드, Safari, Edge, IE에서는 브라우저 문제로 이미지 처리가 제대로 되지 않습니다. 다른 브라우저를 이용하세요.</li>
<li class="list-group-item">안드로이드 및 데스크탑용 Chrome, Firefox 에서 제대로 동작합니다.</li>
</ul>
<hr>
<footer>Built by Jiyong Youn on 2018</footer>
<div class="spacer"></div>
</div>
<script>
"use strict";
var dpr = window.devicePixelRatio || 1;
var canvas = $('#canvas').get(0);
var rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
var ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr);
ctx.font = "200px Noto Sans KR";
ctx.fillStyle = "white";
var path = '';
var img;
var first = true;
var fontsize = 0|canvas.width / 10;
var ori= 1;
var getJosa = function(text) {
var code = text.charCodeAt(text.length-1) - 44032;
if (text.length === 0) return '은';
if (code < 0 || code > 11171) return '는';
if (code % 28 === 0) return '는';
else return '은';
};
var matchorientation1 = function(width, height) {
switch (ori) {
case 2: ctx.translate(width, 0); ctx.scale(-1, 1); break;
case 3: ctx.translate(width, height); ctx.rotate(Math.PI); break;
case 4: ctx.translate(0, height); ctx.scale(1, -1); break;
case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(1*(height/width), -1*(width/height)); break;
case 6: ctx.rotate(0.5 * Math.PI); ctx.translate(0, -width); ctx.scale(1*(height/width), 1*(width/height)); break;
case 7: ctx.rotate(0.5 * Math.PI); ctx.translate(height, -width); ctx.scale(-1*(height/width), 1*(width/height)); break;
case 8: ctx.rotate(-0.5 * Math.PI); ctx.translate(-height, 0); ctx.scale(1*(height/width), 1*(width/height)); break;
}
};
var matchorientation2 = function(width, height) {
switch (ori) {
case 2: ctx.translate(width, 0); ctx.scale(-1,1); break;
case 3: ctx.translate(width, height); ctx.rotate(Math.PI); break;
case 4: ctx.translate(0, height); ctx.scale(1,-1); break;
case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(1*(height/width), -1*(width/height)); break;
case 6: ctx.rotate(-0.5 * Math.PI); ctx.translate(-height, 0); ctx.scale(1*(height/width), 1*(width/height)); break;
case 7: ctx.rotate(0.5 * Math.PI); ctx.translate(height, -width); ctx.scale(-1*(height/width), 1*(width/height)); break;
case 8: ctx.rotate(0.5 * Math.PI); ctx.translate(0, -width); ctx.scale(1*(height/width), 1*(width/height)); break;
}
};
var draw = function() {
var height_tmp, width_tmp;
if (ori >= 5) {
width_tmp = img.height;
height_tmp = img.width;
} else {
width_tmp = img.width;
height_tmp = img.height;
}
$('#canvas').attr('height', height_tmp/width_tmp*canvas.width) * dpr;
ctx.filter = "brightness(90%) sepia(40%) hue-rotate(20deg) grayscale(60%)";
var width = canvas.width;
var height = canvas.height;
matchorientation1(width, height);
ctx.drawImage(img, 0, 0, width, height);
matchorientation2(width, height);
ctx.filter = "sepia(0%) brightness(100%) drop-shadow("+(fontsize*0.04)+"px "+(fontsize*0.04)+"px "+(fontsize*0.07)+"px rgba(0, 0, 0, 0.6)";
ctx.fillStyle = "white";
ctx.font = "normal " + (fontsize*0.87) + "px Noto Sans KR, sans-serif";
if ($('#name').val() === '') $('#name').val('이명박');
var firstline = $('#name').val() + getJosa($('#name').val());
var x = fontsize * 0.65;
for (var i = 0; i < firstline.length; i++) {
ctx.fillText(firstline[i], x, height-(fontsize * 1.44));
if (firstline.charCodeAt(i) >= 44032 && firstline.charCodeAt(i) < 55204) x += fontsize * 0.83 * 0.85;
else x += fontsize * 0.5;
}
ctx.font = "600 " + fontsize + "px Noto Sans KR, sans-serif";
var second = $('#second').val() || "배고픕니다";
var x = fontsize * 0.65;
for (var i = 0; i < second.length; i++) {
ctx.fillText(second[i], x, height-(fontsize * 0.4));
if (second.charCodeAt(i) >= 44032 && second.charCodeAt(i) < 55204) x += fontsize * 0.83;
else x += fontsize * 0.5;
}
var dataURL = canvas.toDataURL();
$('#canvasimg').attr('src', dataURL);
};
var load_txt = function() {
draw();
};
var str2ab = function(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
};
var load = function(e) {
if (e.files && e.files[0]) {
var reader = new FileReader();
reader.onloadend = function(ee) {
img = new Image();
img.onload = function() {
EXIF.getData(this, function() {
ori = EXIF.getTag(this, "Orientation") || 1;
draw();
});
};
path = ee.target.result;
img.src = path;
};
reader.readAsDataURL(e.files[0]);
}
}
</script>
</body>
</html>