enjikaka/minecrafthead.css

## minecrafthead.css

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

canvas {
	width:128px;
	height:128px;
	box-shadow:0 0 5px black;
	margin:1em auto;
}

## minecrafthead.dart
import 'dart:html';

class MinecraftSkin {
	String user;
	CanvasElement ce = new CanvasElement();

	void _generateCanvas(Event e) {
		CanvasRenderingContext2D ctx = ce.getContext('2d');
		ctx.imageSmoothingEnabled = false;
		ctx.drawImageScaledFromSource((e.target as ImageElement),8,8,8,8,0,0,ce.width,ce.height);
	}

	CanvasImageSource getHead() => ce;
	String name() => user;

	MinecraftSkin(String minecraftUser, num size) {
		user = (minecraftUser == null) ? 'Notch' : minecraftUser;
		ce.width = size;
		ce.height = size;
		ImageElement img = new ImageElement()
			..onLoad.listen(_generateCanvas)
			..onError.listen((_) => throw new StateError('User has no skin'));
		img.src = "http://s3.amazonaws.com/MinecraftSkins/"+user+".png";
	}
}

void generateHead(Event e) {
	MinecraftSkin ms;
	try {
		ms = new MinecraftSkin((querySelector('#userName') as InputElement).value, 128);
	} on StateError catch(se) {
		print(se.message);
		querySelector('#status').text = se.message;
	}
	CanvasElement cems = ms.getHead();
	cems.id = "mc" + ms.name();
	cems.title = "mc" + ms.name();
	document.body.append(cems);
	querySelector('#status').text = "Got head!";
}

void main() {
	querySelector('#generateHead').onClick.listen(generateHead);
}

## minecrafthead.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>MinecraftHead</title>
    <link rel="stylesheet" href="minecrafthead.css">
  </head>
  <body>
    <h1>MinecraftHead</h1>
    <div><strong>Status: </strong><span id="status"></span></div>
    I want the head of: <input type="text" id="userName" placeholder="Notch">
    <button id="generateHead">Go!</button><br>
    <script type="application/dart" src="minecrafthead.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	h1, p {
	color: #333;
	}

	#sample_container_id {
	width: 100%;
	height: 400px;
	position: relative;
	border: 1px solid #ccc;
	background-color: #fff;
	}

	#sample_text_id {
	font-size: 24pt;
	text-align: center;
	margin-top: 140px;
	}

	canvas {
	width:128px;
	height:128px;
	box-shadow:0 0 5px black;
	margin:1em auto;
	}
	import 'dart:html';

	class MinecraftSkin {
	String user;
	CanvasElement ce = new CanvasElement();

	void _generateCanvas(Event e) {
	CanvasRenderingContext2D ctx = ce.getContext('2d');
	ctx.imageSmoothingEnabled = false;
	ctx.drawImageScaledFromSource((e.target as ImageElement),8,8,8,8,0,0,ce.width,ce.height);
	}

	CanvasImageSource getHead() => ce;
	String name() => user;

	MinecraftSkin(String minecraftUser, num size) {
	user = (minecraftUser == null) ? 'Notch' : minecraftUser;
	ce.width = size;
	ce.height = size;
	ImageElement img = new ImageElement()
	..onLoad.listen(_generateCanvas)
	..onError.listen((_) => throw new StateError('User has no skin'));
	img.src = "http://s3.amazonaws.com/MinecraftSkins/"+user+".png";
	}
	}

	void generateHead(Event e) {
	MinecraftSkin ms;
	try {
	ms = new MinecraftSkin((querySelector('#userName') as InputElement).value, 128);
	} on StateError catch(se) {
	print(se.message);
	querySelector('#status').text = se.message;
	}
	CanvasElement cems = ms.getHead();
	cems.id = "mc" + ms.name();
	cems.title = "mc" + ms.name();
	document.body.append(cems);
	querySelector('#status').text = "Got head!";
	}

	void main() {
	querySelector('#generateHead').onClick.listen(generateHead);
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>MinecraftHead</title>
	<link rel="stylesheet" href="minecrafthead.css">
	</head>
	<body>
	<h1>MinecraftHead</h1>
	<div><strong>Status: </strong><span id="status"></span></div>
	I want the head of: <input type="text" id="userName" placeholder="Notch">
	<button id="generateHead">Go!</button><br>
	<script type="application/dart" src="minecrafthead.dart"></script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>