Created
September 27, 2012 18:59
-
-
Save danveloper/3795769 to your computer and use it in GitHub Desktop.
HTML5 Thumbnail Processing in IFRAME
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.