Text to hex/image - Image to text/hex

Turns text (ascii) to Hex (rgb) values and image, as well as the other way around. A fun encryption/decryption/steganography tool.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Text to hex to image</title>
</head>
<body>
    <div class="container">
        <h1 class="page-header">Text to Hex (rgb) &amp; Image</h1>
        <h2>A fun encryption/decryption/steganography tool</h2>
        <h3>Input Text (ascii 0-255)</h3>
        <p>Each 3 characters of text become 1 pixel in the resulting image.<br/>Remaining space will show as white, fill as you please.<br/>Change image size below to fit the text.</p>
        <label> Max</label>        
        <label id="ipm">300</label>
        <label> Left</label>
        <label id="ipr">300</label>
        <br/>
        <textarea id="ip" class="form-control" rows="3" maxlength="300"></textarea>
        <hr>
        <h3>Output Hex (rgb)</h3>
        <p>Ascii character's Hex code, combined per 3, used as image pixel rgb values.</p>
        <textarea id="op" class="form-control" rows="3" readonly></textarea>
        <hr>
        <h3>Image (1 px = 3 characters)</h3>
        <p>A lot of text can fit in a small image.<br/>Save the image by right-clicking on it.<br/>Clear pixels and small image, only when not scaled.</p>
        <label>Width</label>
        <input id="iw" type="number" min="0" value="10">
        <label>(px)&nbsp;&nbsp;</label>
        <label>Height</label>
        <input id="ih" type="number" min="0" value="10">
        <label>(px)&nbsp;&nbsp;</label>
        <label>total</label>
        <label id="pt">100</label>
        <label>(px)</label>
        <br/>
        <canvas id="ti" width=10 height=10 style="border: 1px solid black" alt="Text Image"></canvas>
        <br/>
        <button id="hi">Reset Scale</button>
        <button id="si">Scale Image</button>
        <hr>
        <h1 class="page-header">Image to Text &amp; Hex (rgb)</h1>
        <p>Large images at your own risk!<br/>500x500 = 750000 characters!</p>
        <input id="lf"...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

html, body {
    font-family: Roboto Condensed, sans-serif;
    width: auto;
    height: auto;
    margin: 0px;
    padding: 5px;
}

.container {    
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 800px;
}

@media only screen and (max-device-width: 768px) {
    .container {    
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

h1, h2, h3, h4, h5, input, button {
    font-family: Roboto Condensed, sans-serif !important;   
}

#ipm {
    font-weight: bold;
    color: limegreen;
}

#ipr {
    font-weight: bold;
    color: red;
}

#pt {
    font-weight: bold;
}

textarea {
    resize: both;
    width: 370px;
    font-family: Consolas, monospace;
    background: none; /*url('entropy.png') !important;*/
    background-position: center center !important;
    background-repeat: no-repeat !important;
    vertical-align: top;
}

input {
    width: 50px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

JavaScript

var iw = document.getElementById('iw'); // image width
var ih = document.getElementById('ih'); // image height
var pt = document.getElementById('pt'); // pixel total
iw.addEventListener('input', limitInput);
ih.addEventListener('input', limitInput);
var ipm = document.getElementById('ipm'); // in put max
var ipr = document.getElementById('ipr'); // in put remaining
var ip = document.getElementById('ip'); // in put
ip.addEventListener('input', createHexImage);
hi.onclick = createHexImage; // hex image
si.onclick = scaleImage; // scale image
var op = document.getElementById('op'); // out put
var ti = document.getElementById('ti'); // text image
var ctx = ti.getContext('2d');
var imageFile = document.getElementById('lf').files[0];
var lf = document.getElementById('lf');
lf.addEventListener('change', loadImage);
lf.onclick = function () { // to allow re-upload
    this.value = null;
};
var pi = document.getElementById('pi'); // preview image
pi.onload = getImageData;


function createHexImage() {
    ti.width = iw.value;
    ti.height = ih.value;
		var imgData = ctx.createImageData(iw.value, ih.value);
    var arrInput = Array.from(ip.value).join('');
    var arrHex = [];
    var arrDec = [];
    ip.maxLength = 3 * iw.value * ih.value;
    ipm.innerHTML = ip.maxLength
    ipr.innerHTML = ip.maxLength - ip.value.length;
    pt.innerHTML = iw.value * ih.value;
    
    
    for (var n = 0, l = arrInput.length; n < l; n++) {
        if (Number(arrInput.charCodeAt(n)) < 256) {
            var dec = Number(arrInput.charCodeAt(n));
            var hex = ("0" + dec.toString(16)).substr(-2);
            arrDec.push(dec);
            arrHex.push(hex);
            if (n!=0 && (n+1)%3===0){
            		arrDec.push(255);
                arrHex.push(" ");
            }
        }
        else {
            alert("Wrong input!");
            return;
        }
    }
    if (arrInput.length > 0 && arrInput.length % 3 !== 0) {
    		for (i = 0, j = 3 - (arrInput.length % 3); i < j;...