-
Notifications
You must be signed in to change notification settings - Fork 3
/
bannerBusinessCardFormal.htm
184 lines (153 loc) · 17.3 KB
/
bannerBusinessCardFormal.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Business Card Formal Generator</title>
<style>
html,body{margin:0;padding:0;background-color:#272727}
canvas{display:none;text-rendering:optimizeLegibility}
div{display:inline-block;width:1312px;background-color:silver}
input[type=text]{height:30px;width:130px;font-family:Arial;font-size:13px;margin:0;padding:0;box-sizing:border-box}
img{display:inline-block}
span{display:inline-block;width:1312px;background-color:silver;padding-top:10px;padding-bottom:10px;text-align:center;font-family:Arial;font-size:13px}
</style>
</head>
<body>
<canvas width="1312" height="864" id="myCanvas"></canvas>
<div>
<input type="text" id="name" placeholder="Name">
<input type="text" id="slogan" placeholder="Slogan">
<input type="text" id="line1" placeholder="Line 1">
<input type="text" id="line2" placeholder="Line 2">
<input type="text" id="line3" placeholder="Line 3">
<input type="text" id="phone" placeholder="Phone">
<input type="text" id="web" placeholder="Web">
<input type="text" id="email" placeholder="Email">
</div>
<img width="1312" height="864" id="finalResult" alt="banner" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wQQEjQ35agTNQAAAAxJREFUCNdjOH78OAAErgJW23qXwQAAAABJRU5ErkJggg==">
<br /><span>Size: 3.5 x 2 inches 8.89 x 5.08 cm Quality: 300 dpi</span>
<script>
// GETTING THE USER LANGUAGE
var userLanguage = window.navigator.userLanguage || window.navigator.language;
var STRING_PHONE = "";
var STRING_WEB = "";
var STRING_EMAIL = "";
// CHECKING THE USER LANGUAGE
if (userLanguage.substring(0,2)=="es")
{
STRING_PHONE = "Tel: ";
STRING_WEB = "Web: ";
STRING_EMAIL = "Correo: ";
}
else
{
STRING_PHONE = "Phone: ";
STRING_WEB = "Web: ";
STRING_EMAIL = "E-mail: ";
}
window.addEventListener("load", function()
{
// 1312x864 BACKGROUND IMAGE IN PNG FORMAT
var backgroundimg = "data:image/png;base64,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GQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAAGQMkAAAAAJAxQAIAAAAA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";
// LOADING THE BACKGROUND IMAGE
var image1 = new Image;
image1.onload = update;
// CALLING THE UPDATE FUNCTION WHEN THE IMAGE IS LOADED
image1.src = backgroundimg;
// GETTING ALL THE ELEMENTS IN THE WEB FORM
var name = document.getElementById("name");
var slogan = document.getElementById("slogan");
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2");
var line3 = document.getElementById("line3");
var phone = document.getElementById("phone");
var web = document.getElementById("web");
var email = document.getElementById("email");
var canvas = document.getElementById("myCanvas");
// FOCUSING THE NAME
name.focus();
// CLEARING ALL THE INPUTTED VALUES (IF ANY)
name.value = "";
slogan.value = "";
line1.value = "";
line2.value = "";
line3.value = "";
phone.value = "";
web.value = "";
email.value = "";
// USING A VARIABLE IN ORDER TO KNOW WHEN ALL THE GRAPHICAL ELEMENTS ARE LOADED
var elementsLoadedCounter = 0;
function update()
{
// INCREASING THE ELEMENT LOADED COUNTER
elementsLoadedCounter++;
// CHECKING IF THE RIGHT AMOUNT OF ELEMENTS ARE LOADED
if (elementsLoadedCounter < 1)
{
// IF NOT, RETURNING WITHOUT EXECUTING ANYTHING ELSE
return;
}
// GETTING THE CONTEXT
var context = canvas.getContext("2d");
// DRAWING THE BACKGROUND
context.drawImage(image1, 0, 0, 1312, 864);
// SETTING THE FONT STYLE
context.font = "75px Arial";
context.fillStyle = "white";
// DRAWING THE NAME
var valueX1 = context.measureText(name.value).width;
valueX1 = 1312 / 2 - valueX1 / 2;
context.fillText(name.value, valueX1, 190);
// SETTING THE FONT STYLE
context.font = "55px Arial";
context.fillStyle = "#104e8b";
// DRAWING THE SLOGAN
var valueX2 = context.measureText(slogan.value).width;
valueX2 = 1312 / 2 - valueX2 / 2;
context.fillText(slogan.value, valueX2, 300);
// SETTING THE FONT STYLE
context.font = "48px Arial";
context.fillStyle = "#848284";
// DRAWING THE TEXT DESCRIPTION 1
var valueX3 = context.measureText(line1.value).width;
valueX3 = 1312 / 2 - valueX3 / 2;
context.fillText(line1.value, valueX3, 395);
// DRAWING THE TEXT DESCRIPTION 2
var valueX4 = context.measureText(line2.value).width;
valueX4 = 1312 / 2 - valueX4 / 2;
context.fillText(line2.value, valueX4, 465);
// DRAWING THE TEXT DESCRIPTION 3
var valueX5 = context.measureText(line3.value).width;
valueX5 = 1312 / 2 - valueX5 / 2;
context.fillText(line3.value, valueX5, 535);
// SETTING THE FONT STYLE
context.font = "40px Arial";
context.fillStyle = "#104e8b";
// DRAWING THE PHONE NUMBER
var valueX6 = context.measureText(STRING_PHONE + phone.value).width;
valueX6 = 1312 - valueX6 - 130;
context.fillText(STRING_PHONE + phone.value, valueX6, 625);
// DRAWING THE WEB ADDRESS
var valueX7 = context.measureText(STRING_WEB + web.value).width;
valueX7 = 1312 - valueX7 - 130;
context.fillText(STRING_WEB + web.value, valueX7, 675);
// DRAWING THE EMAIL ADDRESS
var valueX8 = context.measureText(STRING_EMAIL + email.value).width;
valueX8 = 1312 - valueX8 - 130;
context.fillText(STRING_EMAIL + email.value, valueX8, 725);
// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
document.getElementById("finalResult").src = canvas.toDataURL("data/png");
}
// SETTING WHAT WILL HAPPEN WHEN THE USER TYPES IN A INPUT BOX
document.getElementById("name").addEventListener("input",function(e){update()});
document.getElementById("slogan").addEventListener("input",function(e){update()});
document.getElementById("line1").addEventListener("input",function(e){update()});
document.getElementById("line2").addEventListener("input",function(e){update()});
document.getElementById("line3").addEventListener("input",function(e){update()});
document.getElementById("phone").addEventListener("input",function(e){update()});
document.getElementById("web").addEventListener("input",function(e){update()});
document.getElementById("email").addEventListener("input",function(e){update()});
});
</script>
</body>
</html>