inaz2 · August 30, 2015 07:31 · inaz2 · Aug 21, 2015
diff --git a/megrepper.html b/megrepper.html
 <!DOCTYPE html>
 <html>
 <meta charset="UTF-8">
 <title>megrepper</title>
 <body>
 <canvas id="canvas"></canvas>
 <div style="position: fixed; left: 160px; display: inline-block;">
 <h1>megrepper</h1>
 <pre id="edit" style="width: 40em; margin: 0; background-color: #eeeeee">Drag &amp; drop a file on page</pre>
 </div>
 <script>
 (function(){

 var edit = document.getElementById("edit");
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 var ary = null;

 function handleFiles(files) {
    var f = new FileReader();
    f.readAsArrayBuffer(files[0]);
    f.onloadend = function(){
        ary = new Uint8Array(f.result);
        var length = ary.length;

        canvas.width = 128;
        canvas.height = Math.floor(length/128);

        var imagedata = ctx.createImageData(canvas.width, canvas.height);

        for (var i=0; i<length; i++) {
            var x = ary[i];
            if (x == 0x00) {
                putPixel(imagedata.data, i, 0xff, 0xff, 0xff); // white
            } else if (x >= 0x01 && x <= 0x1F) {
                putPixel(imagedata.data, i, 0x00, 0xff, 0xff); // cyan
            } else if (x >= 0x20 && x <= 0x7F) {
                putPixel(imagedata.data, i, 0xff, 0x00, 0x00); // red
            } else {
                putPixel(imagedata.data, i, 0x00, 0x00, 0x00); // black
            }
        }
        ctx.putImageData(imagedata, 0, 0);
        edit.textContent = hexdump(ary, 0, 0x200);

        function putPixel(data, idx, r, g, b) {
            data[4*idx+0] = r;
            data[4*idx+1] = g;
            data[4*idx+2] = b;
            data[4*idx+3] = 0xff;
        }
    }
 }

 function hexdump(ary, start, length)
 {
    var buffer = "";
    for (var i=0; i<Math.floor(length/16); i++) {
        var bytes = "";
        var chars = "";
        for (var j=0; j<16; j++) {
            var idx = start+i*16+j;
            if (idx < ary.length) {
                var x = ary[idx];
                bytes += ("0"+x.toString(16)).slice(-2) + " ";
                chars += (x >= 0x20 && x <= 0x7F) ? String.fromCharCode(x) : ".";
            } else {
                bytes += "   ";
                chars += " ";
            }
        }
        buffer += ("00000" + (idx/16|0).toString(16)).slice(-5) + "0  " + bytes + " " + chars + "\n";
    }
    return buffer;
 }

 function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
 }

 function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
 }

 function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    var dt = e.dataTransfer;
    var files = dt.files;

    handleFiles(files);
 }

 function mousemove(e)
 {
    var y = e.pageY - e.target.offsetTop;
    var start = y*128;
    edit.textContent = hexdump(ary, start, 0x200);
 }

 var html = document.getElementsByTagName("html")[0];
 html.addEventListener("dragenter", dragenter, false);
 html.addEventListener("dragover", dragover, false);
 html.addEventListener("drop", drop, false);
 canvas.addEventListener("mousemove", mousemove, false);

 })();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<title>megrepper</title>
	<body>
	<canvas id="canvas"></canvas>
	<div style="position: fixed; left: 160px; display: inline-block;">
	<h1>megrepper</h1>
	<pre id="edit" style="width: 40em; margin: 0; background-color: #eeeeee">Drag & drop a file on page</pre>
	</div>
	<script>
	(function(){

	var edit = document.getElementById("edit");
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var ary = null;

	function handleFiles(files) {
	var f = new FileReader();
	f.readAsArrayBuffer(files[0]);
	f.onloadend = function(){
	ary = new Uint8Array(f.result);
	var length = ary.length;

	canvas.width = 128;
	canvas.height = Math.floor(length/128);

	var imagedata = ctx.createImageData(canvas.width, canvas.height);

	for (var i=0; i<length; i++) {
	var x = ary[i];
	if (x == 0x00) {
	putPixel(imagedata.data, i, 0xff, 0xff, 0xff); // white
	} else if (x >= 0x01 && x <= 0x1F) {
	putPixel(imagedata.data, i, 0x00, 0xff, 0xff); // cyan
	} else if (x >= 0x20 && x <= 0x7F) {
	putPixel(imagedata.data, i, 0xff, 0x00, 0x00); // red
	} else {
	putPixel(imagedata.data, i, 0x00, 0x00, 0x00); // black
	}
	}
	ctx.putImageData(imagedata, 0, 0);
	edit.textContent = hexdump(ary, 0, 0x200);

	function putPixel(data, idx, r, g, b) {
	data[4*idx+0] = r;
	data[4*idx+1] = g;
	data[4*idx+2] = b;
	data[4*idx+3] = 0xff;
	}
	}
	}

	function hexdump(ary, start, length)
	{
	var buffer = "";
	for (var i=0; i<Math.floor(length/16); i++) {
	var bytes = "";
	var chars = "";
	for (var j=0; j<16; j++) {
	var idx = start+i*16+j;
	if (idx < ary.length) {
	var x = ary[idx];
	bytes += ("0"+x.toString(16)).slice(-2) + " ";
	chars += (x >= 0x20 && x <= 0x7F) ? String.fromCharCode(x) : ".";
	} else {
	bytes += " ";
	chars += " ";
	}
	}
	buffer += ("00000" + (idx/16\|0).toString(16)).slice(-5) + "0 " + bytes + " " + chars + "\n";
	}
	return buffer;
	}

	function dragenter(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function dragover(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	function drop(e) {
	e.stopPropagation();
	e.preventDefault();

	var dt = e.dataTransfer;
	var files = dt.files;

	handleFiles(files);
	}

	function mousemove(e)
	{
	var y = e.pageY - e.target.offsetTop;
	var start = y*128;
	edit.textContent = hexdump(ary, start, 0x200);
	}

	var html = document.getElementsByTagName("html")[0];
	html.addEventListener("dragenter", dragenter, false);
	html.addEventListener("dragover", dragover, false);
	html.addEventListener("drop", drop, false);
	canvas.addEventListener("mousemove", mousemove, false);

	})();
	</script>
	</body>
	</html>