JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><head><meta charset="utf-8"><title>Raw data to image conversion and vice versa</title><style>body{font-family:Sans-Serif;}::-webkit-file-upload-button{background-color:#fff;color:#000;border:1px solid #ccc;border-radius:4px;}</style></head><body><fieldset><legend>Type:</legend><input type="radio" name="type" value="encode" checked>Encode<br><input type="radio" name="type" value="decode">Decode to file<br><input type="radio" name="type" value="decode-img">Decode to image<br><input type="radio" name="type" value="decode-txt">Decode to text<br><input type="radio" name="type" value="hex">Hex dump<br></fieldset><br><p>You can also paste files.</p><label for="file">Your file:</label><input type="file" id="file"><br><div id="result" style="padding:4px;"><p style="color:#888;">Result appears here.</p></div><script>function removeChildren(e){for(;e.lastChild;)e.removeChild(e.lastChild)}function saveAs(e,t){var a=window.URL.createObjectURL(e),n=document.createElement("a");n.style="display: none",n.href=a,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),setTimeout(function(){window.URL.revokeObjectURL(a)},1e3)}var fileInput=document.getElementById("file"),getType=()=>document.querySelector('input[name="type"]:checked').value,result=document.getElementById("result");function textToResult(e){var t=document.createElement("pre");t.appendChild(document.createTextNode(e)),result.appendChild(t)}function readBytes(e){return new Promise(t=>{var a=new FileReader;a.onload=(()=>{t(new Uint8Array(a.result))}),a.readAsArrayBuffer(e)})}function readAsDataURL(e){return new Promise(t=>{var a=new FileReader;a.onload=(()=>{t(a.result)}),a.readAsDataURL(e)})}const LAST_PIXEL=[[255,0,0],[255,255,0],[255,255,255]];function encode(e){var t=document.createElement("canvas"),a=t.getContext("2d"),n=Math.ceil(e.length/3)+1,r=Math.ceil(Math.sqrt(n)),o=Math.ceil(n/r);t.width=r,t.height=o;for(var...