Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 Thumbnail Processing in IFRAME
<!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>
@danveloper
Copy link
Author

danveloper commented Sep 27, 2012

Using HTML5 Canvas to make a thumbnail of an image inside of an iframe to simulate "background" processing w/o locking up your primary DOM.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment