Fixes issue #1

Some images didn't get converted properly. This was easy to
spot in smaller image where the last part seemed to be missing.
Each of the hex values generated stands for a byte = 8 bits =
8 pixels. But sometimes the size of the image caused the last
hex value to contain less than 8 bits (because there weren't
enough pixels left). As the hex values represent 8 pixels being drawn
right to left, the missing bits would cause the pixels to move out
of the canvas.
The solution is to always pad the last hex to a length of 8.
.

index.html

@@ -121,8 +121,8 @@
 		}
 		#images-canvas-container {
 			display: flex;
-		flex-wrap: wrap;
-		align-items: flex-start;
+			flex-wrap: wrap;
+			align-items: flex-start;
 		}
 		#extra-settings-container {	}
 		#arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; }
@@ -701,13 +701,24 @@
 			var byteIndex = 7;
 			var number = 0;
 
+			// format is RGBA, so move 4 steps per pixel
 			for(var index = 0; index < imageData.data.length; index += 4){
+				// Get the average of the RGB (we ignore A)
 				var avg = (imageData.data[index] + imageData.data[index + 1] + imageData.data[index + 2]) / 3;
 				if(avg > settings['threshold']){
 					number += Math.pow(2, byteIndex);
 				}
 				byteIndex--;
 
+				// If we are at the last set, fill up our byte to 8 bits
+				if (index == imageData.data.length-4){
+					for(var i=byteIndex;i>-1;i--){
+						number += Math.pow(2, i);
+					}
+					byteIndex = -1;
+				}
+
+				// When we have the complete 8 bits, combine them into a hex value
 				if(byteIndex < 0){
 					var byteSet = number.toString(16);
 					if(byteSet.length == 1){ byteSet = "0"+byteSet; }