Image to data buffer for Redactd

by Admiral Potato

HTML

<div>
	<label>
		<span>Name output</span>
		<input type="text" id="name_input" value="Fireworks">
	</label>
</div>
<div>
	<label>
		<span>Frame height</span>
		<input type="text" id="height_input" value="12">
	</label>
</div>
<form id="input-form">
	<div>
		<label>
			<span>Select image</span>
			<input type="file" id="file_input">
		</label>
		<input
			id="reset_button"
			type="reset"
			value="reset"
		>
	</div>
</form>

<div>
	<canvas id="sample_canvas"></canvas>
</div>
<div>
<a id="link_element">Link not ready</a>
</div>
<textarea id="output_text"></textarea>

CSS

canvas {
	border: 1px solid #333;
}

JavaScript

var nameInput = document.getElementById("name_input");
var fileInput = document.getElementById("file_input");
var heightInput = document.getElementById("height_input");
var sampleCanvas = document.getElementById("sample_canvas");
var link = document.getElementById("link_element");
var output = document.getElementById("output_text");
var context = sampleCanvas.getContext('2d');

var inputHandler =  (changeEvent) => {
	var dataImage = new Image();
	console.log('What is changeEvent', changeEvent);
	const file = changeEvent.target.files[0];
	console.log('What is file?', file);
	console.dir(file);
	var url = URL.createObjectURL(file);
	dataImage.addEventListener('load', () => {
	  var {width, height} = dataImage;
		sampleCanvas.width = width;
		sampleCanvas.height = height;
		context.drawImage(dataImage, 0, 0);
		var imageBuffer = context.getImageData(0, 0, width, height);
		console.log('What is imageBuffer?', imageBuffer);
		var name = nameInput.value;
		var frameHeight = heightInput.value * 1;
		var filename = name + '.h';
		var text = formatOutput(imageBuffer, width, height, frameHeight, name);
		var downloadData = prepareDownload(text, filename);
		Object.entries(downloadData).forEach(([key, value]) => {
			link[key] = value;
		});
		link.innerText = 'Download ' + filename;
		output.innerHTML = text;
	})
	dataImage.src = url;
};

fileInput.addEventListener('change', inputHandler);


const makeSegments = (array, n) => {
	let [...arr] = array;
	var res = [];
	while (arr.length) {
		res.push(arr.splice(0, n));
	}
	return res;
};

var generateArrayBufferWithoutAlpha = (imageBuffer) => {
	var output = [];
	for (var i = 0; i < imageBuffer.length; i += 4) {
		output.push(imageBuffer[i + 0]);
		output.push(imageBuffer[i + 1]);
		output.push(imageBuffer[i + 2]);
		// do not the alpha
	}
	return output;
}

var formatOutput= (imageBuffer, width, height, frameHeight, name) => {
	var NAME = name.toLocaleUpperCase();
	var numLights = width * frameHeight;
	var numFrames = height...