bannerGenerator/bannerFormats.htm at master · lrusso/bannerGenerator · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Banner Formats Generator</title>
		<style>
			html,body{margin:0;padding:0;background-color:#272727}
			canvas{display:none;text-rendering:optimizeLegibility}
			div{display:inline-block;width:100%;background-color:silver}
			select{height:30px;width:120px;font-family:Arial;font-size:13px;margin:0;padding:0;background-color:white;border:1px solid silver;}
			input[type=text]{height:30px;width:90px;font-family:Arial;font-size:13px;margin:0;padding:0;box-sizing:border-box}
			input[type=file]{height:30px;font-family:Arial;font-size:13px;line-height:30px;vertical-align:top;margin:0;padding:0;box-sizing:border-box}
			img{display:inline-block}
		</style>
	</head>
	<body>
		<div>
			<input type="file" id="screenshot">
			<select id="fileFormat"><option selected value="png">PNG</option><option value="jpeg">JPG</option><option value="webp">WEBP</option></select>
		</div>

		<img width="320" height="200" id="finalResult" alt="banner" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AodAgAMo/D8kgAAAAtJREFUCNdj+A8EAAn7A/1jJsWPAAAAAElFTkSuQmCC">

		<script>
			window.addEventListener("load", function()
				{
				// CLEARING ALL THE INPUTTED VALUES (IF ANY)
				document.getElementById("screenshot").value = null;
				document.getElementById("fileFormat").selectedIndex = 0;

				// 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 < 0)
						{
						// IF NOT, RETURNING WITHOUT EXECUTING ANYTHING ELSE
						return;
						}

					try
						{
						// CREATING THE FILEREADER
						var filereader = new FileReader();

						// GETTING THE EXTENSION
						var extension = document.getElementById("screenshot").files[0].name.split(".").pop().toLowerCase();

						// CHECKING THE EXTENSION IN ORDER TO KNOW IF THE FILE IS AN IMAGE
						if (extension=="jpg" | extension=="jpeg" | extension=="png" | extension=="webp" | extension=="avif")
							{
							// SETTING WHAT WILL HAPPEN WHEN THE FILE IS LOADED
							filereader.onload = function()
								{
								// LOADING THE IMAGE FILE
								var image1 = new Image;
								image1.onload = function()
									{
									var finalCanvas;
									var context;

									try
										{
										// CREATING THE CANVAS
										finalCanvas = document.createElement("canvas");
										finalCanvas.width = image1.width;
										finalCanvas.height = image1.height;

										// GETTING THE CONTEXT
										context = finalCanvas.getContext("2d");

										// DRAWING THE IMAGE
										context.drawImage(image1, 0, 0, image1.width, image1.height);
										}
										catch(err)
										{
										}

									// UPDATING THE FINAL IMAGE WIDTH AND HEIGHT
									document.getElementById("finalResult").style.width = image1.width + "px";
									document.getElementById("finalResult").style.height = image1.height + "px";

									// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
									document.getElementById("finalResult").src = finalCanvas.toDataURL("image/" + fileFormat.value);
									};
								image1.src = filereader.result;
								};

							// READING/LOADING THE FILE
							filereader.readAsDataURL(document.getElementById("screenshot").files[0]);
							}
						}
						catch(err)
						{
						}
					}

				// SETTING WHAT WILL HAPPEN WHEN THE USER SELECTS A FILE
				document.getElementById("screenshot").addEventListener("change",function(e){update()});
				document.getElementById("fileFormat").addEventListener("change",function(e){update();});
				});
		</script>
	</body>
</html>