-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
103 lines (97 loc) · 2.54 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SKAMify</title>
<style>
body {
background: #aaa;
}
.dostuff {
margin: 10px 0;
padding: 10px 0;
}
main {
background: #eee;
margin: 0 auto;
width: 1026px;
}
#dag {
width: 1024px;
height: 576px;
border: 1px solid yellow;
}
#download.hidden {
display: none;
}
#download {
text-transform: uppercase;
font-family: sans-serif;
text-decoration: none;
color: yellow;
background: #aaa;
border: 1px solid yellow;
padding: 4px;
margin: 10px 10px;
}
</style>
</head>
<body>
<main>
<div class="dostuff">
<input type="file" id="bilde">
<a class="hidden" id="download" download="skam.jpg" href="/">Download</a>
</div>
<div id="dag"></div>
</main>
<script>
function hvaDag(cxt) {
var date = new Date();
var dayName = [
"SØNDAG", "MANDAG", "TIRSDAG", "ONSDAG", "TORSDAG", "FREDAG", "LØRDAG"
][date.getDay()];
var time = [("0" + date.getHours()).slice(-2), ("0" + date.getMinutes()).slice(-2)].join(':');
cxt.fillStyle = 'yellow';
cxt.font = '900 238px sans-serif';
cxt.textBaseline = 'top';
cxt.fillText(dayName, -10, -40, 1045);
cxt.font = '100 350px sans-serif';
cxt.fillText(time, -10, 130);
}
function showDownload(canvas) {
var download = document.getElementById("download");
download.setAttribute("href", canvas.toDataURL('image/jpeg', 1));
download.classList.remove("hidden");
}
function skamify(e) {
var image = this.files[0];
if (image && image.type.match('image/*')) {
var reader = new FileReader();
var dag = document.getElementById('dag');
reader.onloadend = function(e) {
var img = new Image();
img.onload = function() {
var width = 1024;
var height = img.height/img.width * width;
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'image');
canvas.width = width;
canvas.height = 9*width/16;
var cxt = canvas.getContext('2d');
cxt.drawImage(this, 0, 0, img.width, img.height, 0, 0, width, height);
hvaDag(cxt);
if (dag.firstChild) { dag.removeChild(dag.firstChild); }
dag.appendChild(canvas);
showDownload(canvas);
}
img.src = e.target.result;
}
reader.readAsDataURL(image);
}
}
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('bilde').addEventListener('change', skamify, false);
}
</script>
</body>
</html>