danveloper/html5-thumbnail-iframe.html

## html5-thumbnail-iframe.html
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
	// Must be server-side images; non-origin images will result in a security exception
	var images = ["img.jpg"];

	for (var i=0;i<images.length;i++) {
		thumbnailify(images[i]);
	}
};

function thumbnailify(fileName) {
	var resizer  = document.querySelector("#thumbnail-resizer");

	// Work around the script not getting properly attached to the iframe dom
	var script = document.createElement("script");
	var content = resizer.innerHTML;
	script.innerHTML = content;

	var iframe  = document.createElement("iframe");
	iframe.style.display = "none";
	iframe.onload = function() {
		this.contentWindow.document.body.appendChild(script);
		var Photo = this.contentWindow["Photo"];
		var $this = this;
		this.contentWindow.document.body.addEventListener("thumbnailready", function(e) {
			var dataUrl = e.data;
			attachImage(dataUrl);
			document.body.removeChild(iframe);
		});
		Photo.resizeImage(fileName);
	};
	document.body.appendChild(iframe);
}

function attachImage(dataurl) {
	var img = new Image();
	img.src = dataurl;
	document.body.appendChild(img);
}
</script>
</html>
<body>

<script id="thumbnail-resizer">
var Settings = {
	maxWidth: 100,
	maxHeight: 100
};
var Photo = {
	image: null,
	canvas: null,
	context: null,

	resizeImage: function(fileName) {
		image = new Image();
		image.src = fileName;
		image.style.display = "none";
		document.body.appendChild(image);
		image.onload = function() {
			Photo.drawImage();
			Photo.dispatchEvent();
		};
	},

	drawImage: function() {
		var thumbnailPixels = Photo.calculatePixels();
		var thumbWidth = thumbnailPixels[0], thumbHeight = thumbnailPixels[1];

		canvas = document.createElement("canvas");
		context = canvas.getContext('2d');
		canvas.width = thumbWidth, canvas.height = thumbHeight;

		context.drawImage(image, 0, 0, thumbWidth, thumbHeight);
	},

	dispatchEvent: function() {
		var event;
		if (document.createEvent) {
			event = document.createEvent("HTMLEvents");
			event.initEvent("thumbnailready", true, true);
		} else {
			event = document.createEventObject();
			event.eventType = "thumbnailready";
		}

		event.data = Photo.getDataURL();

		if (document.createEvent) {
			document.body.dispatchEvent(event);
		} else {
			document.body.fireEvent("on" + event.eventType, event);
		}
	},

	calculatePixels: function() {
		var newWidth, newHeight, ratio;
		if (image.width > Settings.maxWidth) {
			ratio = Settings.maxWidth / image.width;
			newHeight = image.height * ratio;
			newWidth = image.width * ratio;
		}

		if (image.height > Settings.maxHeight) {
			ratio = Settings.maxHeight / image.height;
			newWidth = image.width * ratio;
		}

		return [newWidth, newHeight];
	},

	getDataURL: function() {
		return canvas.toDataURL();
	}

};
</script>

</body>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	window.onload = function() {
	// Must be server-side images; non-origin images will result in a security exception
	var images = ["img.jpg"];

	for (var i=0;i<images.length;i++) {
	thumbnailify(images[i]);
	}
	};

	function thumbnailify(fileName) {
	var resizer = document.querySelector("#thumbnail-resizer");

	// Work around the script not getting properly attached to the iframe dom
	var script = document.createElement("script");
	var content = resizer.innerHTML;
	script.innerHTML = content;

	var iframe = document.createElement("iframe");
	iframe.style.display = "none";
	iframe.onload = function() {
	this.contentWindow.document.body.appendChild(script);
	var Photo = this.contentWindow["Photo"];
	var $this = this;
	this.contentWindow.document.body.addEventListener("thumbnailready", function(e) {
	var dataUrl = e.data;
	attachImage(dataUrl);
	document.body.removeChild(iframe);
	});
	Photo.resizeImage(fileName);
	};
	document.body.appendChild(iframe);
	}

	function attachImage(dataurl) {
	var img = new Image();
	img.src = dataurl;
	document.body.appendChild(img);
	}
	</script>
	</html>
	<body>

	<script id="thumbnail-resizer">
	var Settings = {
	maxWidth: 100,
	maxHeight: 100
	};
	var Photo = {
	image: null,
	canvas: null,
	context: null,

	resizeImage: function(fileName) {
	image = new Image();
	image.src = fileName;
	image.style.display = "none";
	document.body.appendChild(image);
	image.onload = function() {
	Photo.drawImage();
	Photo.dispatchEvent();
	};
	},

	drawImage: function() {
	var thumbnailPixels = Photo.calculatePixels();
	var thumbWidth = thumbnailPixels[0], thumbHeight = thumbnailPixels[1];

	canvas = document.createElement("canvas");
	context = canvas.getContext('2d');
	canvas.width = thumbWidth, canvas.height = thumbHeight;

	context.drawImage(image, 0, 0, thumbWidth, thumbHeight);
	},

	dispatchEvent: function() {
	var event;
	if (document.createEvent) {
	event = document.createEvent("HTMLEvents");
	event.initEvent("thumbnailready", true, true);
	} else {
	event = document.createEventObject();
	event.eventType = "thumbnailready";
	}

	event.data = Photo.getDataURL();

	if (document.createEvent) {
	document.body.dispatchEvent(event);
	} else {
	document.body.fireEvent("on" + event.eventType, event);
	}
	},

	calculatePixels: function() {
	var newWidth, newHeight, ratio;
	if (image.width > Settings.maxWidth) {
	ratio = Settings.maxWidth / image.width;
	newHeight = image.height * ratio;
	newWidth = image.width * ratio;
	}

	if (image.height > Settings.maxHeight) {
	ratio = Settings.maxHeight / image.height;
	newWidth = image.width * ratio;
	}

	return [newWidth, newHeight];
	},

	getDataURL: function() {
	return canvas.toDataURL();
	}

	};
	</script>

	</body>