alvinsj · December 14, 2015 00:49
diff --git a/html5-thumbnail-iframe.html b/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;
 			newHeight = image.height * ratio;
 			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;
	newHeight = image.height * ratio;
	newWidth = image.width * ratio;
	}

	return [newWidth, newHeight];
	},

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

	};
	</script>

	</body>