-
Notifications
You must be signed in to change notification settings - Fork 0
/
thumbnail-maker.html
77 lines (77 loc) · 3.35 KB
/
thumbnail-maker.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
<!DOCTYPE html>
<html>
<head>
<title>Dhar Mann Thumbnail Maker</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
a, div, h1, p, span, strong {color: #fff; font-family: verdana;}
</style>
</head>
<body>
<h1>Dhar Mann Thumbnail Maker</h1>
<p>Create a Dhar Mann thumbnail with the HTML canvas.</p>
<div class="colours">
<span>Gradients:</span>
<input id="colour1" type="text" maxlength=4 value="#8ff" style="width: 40px;">
<input id="colour2" type="text" maxlength=4 value="#080" style="width: 40px;">
</div>
<div>
<span>Text:</span>
<input id="text1" type="text" maxlength=16 value="KID FLATTENS" style="width: 120px;">
<input id="text2" type="text" maxlength=16 value="MOM'S TIRE" style="width: 120px;">
<input id="text3" type="text" maxlength=16 value="TO SKIP TEST" style="width: 120px;">
</div>
<div>
<span>Azure Text:</span>
<select id="azure">
<option value="1">First Line</option>
<option value="2">Second Line</option>
<option value="3" selected="true">Third Line</option>
</select>
<span>Emoji:</span>
<input id="emoji" type="text" value="😠" style="width: 40px;">
</div>
<canvas id="myCanvas" width=640 height=360></canvas>
<script>
var ctx = myCanvas.getContext("2d");
setInterval(function() {
textLength = [text1.value.length, text2.value.length, text3.value.length]
textHeight = 2500 / ((Math.max(...textLength) < 9) ? 9 : Math.max(...textLength));
textOffset = -20000 / textHeight + 90;
ctx.clearRect(0, 0, 640, 360)
gradient = ctx.createLinearGradient(0, 0, 0, 360)
colour1 = document.getElementById("colour1").value
colour2 = document.getElementById("colour2").value
gradient.addColorStop(0, colour1);
gradient.addColorStop(1, colour2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 640, 360);
ctx.fillStyle = "#000000";
ctx.fillRect(0, 240 - textHeight + textOffset, 360, textHeight + 27);
ctx.fillRect(0, 294, 300, 60);
ctx.fillStyle = "#ffffff";
ctx.font = "45px Trebuchet MS";
ctx.textAlign = "left";
ctx.fillText("👦🏻 Dhar Mann", 5, 340);
ctx.textAlign = "center";
ctx.font = textHeight / 3.5 + "px Impact";
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
if (azure.value === "1") {ctx.fillStyle = "#00bfff"}
ctx.fillText(text1.value, 180, 225 - textHeight / 1.75 + textOffset);
ctx.font = textHeight / 3.5 + "px Impact";
ctx.fillStyle = "#ffffff";
if (azure.value === "2") {ctx.fillStyle = "#00bfff"}
ctx.fillText(text2.value, 180, 242.5 - textHeight / 3 + textOffset);
ctx.font = textHeight / 3.5 + "px Impact";
ctx.fillStyle = "#ffffff";
if (azure.value === "3") {ctx.fillStyle = "#00bfff"}
ctx.fillText(text3.value, 180, 260 - textHeight / 12 + textOffset);
ctx.font = "180px Consolas";
ctx.textAlign = "center";
ctx.fillText(emoji.value, 500, 240);
});
</script>
</body>
</html>