-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (130 loc) · 5.91 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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> My Scientific Name Poster</title>
<meta name="keywords" content="personalized, storybooks, science, STEM, free books, for girls, read online"/>
<meta name="author" content="Jean Fan"/>
<meta name="description" content="CuSTEMized is a not-for-profit initiative that encourages kids to envision themselves in Science, Technology, Engineering, and Math (STEM) by providing personalized STEM-related motivational books and goodies. Make a free, personalized ebook copy of our storybooks for your kids today!">
<!-- AddThis -->
<meta property="og:title" content="CuSTEMized" />
<meta property="og:description" content="CuSTEMized is a not-for-profit initiative that encourages kids to envision themselves in Science, Technology, Engineering, and Math (STEM) by providing personalized STEM-related motivational books and goodies. Make a free, personalized ebook copy of our storybooks for your kids today!"/>
<meta property="og:image" content="img/banner/banner.jpg" />
<link href="https://custemized.org/css/font-awesome.css" rel="stylesheet">
<link href="https://custemized.org/css/jquery.fullPage.css" rel="stylesheet">
<link href="https://custemized.org/css/app.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
<!--
<link href="https://custemized.org/css/component.css" rel="stylesheet">
-->
<script src="https://custemized.org/js/jquery.min.js"></script>
<script src="https://custemized.org/js/bootstrap.min.js"></script>
<script src="https://custemized.org/js/jquery.fullPage.min.js"></script>
<link rel="shortcut icon" href="https://custemized.org/img/favicon.ico ">
</head>
<body class="bg-paper" onload="makePoster()" onresize="makePoster()">
<header class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse" style="color:#666">
<i class="fa fa-bars"></i>
</button>
<div id="logo"> <a class="navbar-brand" href="https://custemized.org">
<img src=https://custemized.org/img/logo.svg alt="CuSTEMized"/>
</a> </div>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="">
<a href="https://custemized.org">
Visit CuSTEMized.org For More Resources
</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container" style="padding: 60px 30px">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="input-group input-group-lg">
<label for="name" class="input-group-addon">Name</label>
<input placeholder="Your Name" class="form-control" name="name" type="text" id="name" value="Name">
</div>
</div>
</div>
<br>
<div class="row"><div class="col-md-12">
<button class="btn btn-lg bg-secondary btn-block" onclick="makePoster()">Make My Poster</button>
</div></div>
</div>
<canvas id="img"></canvas>
<div class="container" style="padding: 60px 30px">
<div class="row text-center">
<a id="download"><button class="btn btn-lg bg-primary btn-block">Download</button></a>
</div>
</div>
</body>
<script type="text/javascript">
function makePoster() {
var dictionary = {}
var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < ALPHABET.length; i++) {
dictionary[ALPHABET[i]] = 'img-opt/'.concat(ALPHABET[i], '-01_optimized.jpg');
}
var str = document.getElementById("name").value
var res = str.toUpperCase().split("")
document.getElementById("img").innerHTML = ""
function loadImages(sources, callback) {
var images = {}
var loadedImages = 0
var numImages = 0
// get num of sources
for(var src in sources) {
numImages++
}
for(var i = 0; i < sources.length; i++) {
images[i] = new Image()
images[i].onload = function() {
if(++loadedImages >= numImages) {
callback(images)
}
}
images[i].src = sources[i]
}
}
var canvas = document.getElementById('img')
var context = canvas.getContext('2d')
canvas.width = window.innerWidth
var imgWidth = canvas.width/res.length
var imgHeight = imgWidth * 792/289
canvas.height = imgHeight
context.clearRect(0, 0, canvas.width, canvas.height)
var sources = []
for(var i = 0; i < res.length; i++) {
//console.log(res[i])
sources[sources.length] = dictionary[res[i]]
}
loadImages(sources, function(images) {
for(var i = 0; i < res.length; i++) {
context.drawImage(images[i], i*imgWidth, 0, imgWidth, imgHeight)
}
})
}
function downloadCanvas(link, canvasId, filename) {
document.getElementById(canvasId).toBlob(function(blob) {
// need a dummy link to enable the download after the first click
// executes the function toBlob once
// after the toBlob function finishes, this function will run?
var a = document.createElement("a");
a.download = filename;
a.href = URL.createObjectURL(blob); // this creates a URL to the Blob file object
a.click(); // trigger the download button again
});
} // end of download canvas
document.getElementById('download').addEventListener('click', function() {
downloadCanvas(this, 'img', 'CuSTEMized_MyScientificNamePoster.png');
}, false);
</script>
</html>