[HTML] Lazy Image Tag generator

lazy-image-tag-generator.html

<style>
body { background-color:#111; color:#eee; text-align:center; font: normal 14px/1.1em Helvetica }
#output { width:100%;height:200px;padding:1em;border:1px #000 dashed; background: rgba(255, 255, 255, 0.08); color: #ccc;
	font-size: 0.9em;
  font-family: monospace;}
#image_url{ font-size: 1.6em; width: 100%; text-align:center; background: rgba(255,255,255,.2); color:#fff; border: 0; padding: 0.7em;}
.btn {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;border:1px solid #dcdcdc;
	display:inline-block;cursor:pointer;
	color:#666666;font-size:1em;font-weight:bold;
	padding:6px 24px;text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.btn:active {	position:relative;top:1px; }
.btn:hover { background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); background-color:#e9e9e9 }
</style>
<br>
<img src="http://caffeina.com/assets/img/logo.svg">
<br>
<br>
<p>
<h2>Lazy Image TAG Generator</h2>
</p>
<br>
<br>
<input type="text" id="image_url" placeholder="http://www.example.com/big-image.jpg">
<br>
<p><a class="btn" onclick="makeimage()">Build</a></p>
<br>
<textarea id=output></textarea>
<br><br><div id=t></div>

<script type="text/template" id="img_template"><div style="background-image:url({THUMB});background-size:cover;transition:background-image .5s ease-in-out;width:{WIDTH}px;height:{HEIGHT}px;"><img width="{WIDTH}" height="{HEIGHT}" src="{IMAGE}" style="opacity:0" onload="this.parentNode.style['background-image']='url('+this.src+')'"></div></script>

<script>
function makeimage(){
	var url = document.getElementById("image_url").value
	console.log("Building image for " + url);
	location.hash = '#' + url
	var source = new Image();
	source.onload = function(){
	  var canvas = document.createElement('canvas');
    canvas.width= 20
    canvas.height=canvas.width*source.height/source.width
    var ctx = canvas.getContext('2d')
    ctx.drawImage(source, 0.1, 0.1, canvas.width, canvas.height)

	  var buffer = document.createElement('canvas');
	  buffer.width=canvas.width
	  buffer.height=canvas.height
    var bctx = canvas.getContext('2d')

    bctx.globalAlpha = 0.1;
    var offset = 1;
    for (var i = 0; i < 4; i++) {
    	bctx.drawImage(canvas, offset, 0, canvas.width-offset, canvas.height, 0, 0,canvas.width-offset, canvas.height);
    	bctx.drawImage(canvas, 0, offset, canvas.width, canvas.height-offset, 0, 0,canvas.width, canvas.height-offset);
    }

    ctx.drawImage(buffer, 0, 0, canvas.width, canvas.height)

		var data = {
			IMAGE:  url,
			THUMB:  canvas.toDataURL("image/jpg").replace(/=+$/,''),
			WIDTH:  source.width,
			HEIGHT: source.height
		}

		document.body.appendChild(canvas)

		var res = document.getElementById("img_template").innerHTML.replace(/{([a-z_-]+)}/ig,function(_,key){ return data[key] });
		document.getElementById("output").innerHTML = res
		document.getElementById("t").innerHTML = res.replace('width="'+data.WIDTH+'"','width="80%"')
																							  .replace('height="'+data.HEIGHT+'"','')
																								.replace('width:'+data.WIDTH+'px','width:80%')
																								.replace('height:'+data.HEIGHT+'px;','')
																							  .replace('style="background','style="margin:0 auto;background')
	};
	source.crossOrigin="Anonymous";
	source.src = url
}
window.onload=function(){
	if (url = location.hash.substr(1)) {
		document.getElementById("image_url").value = url
		makeimage()
	}
}
</script>