-<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <title>Screenshot console - html2canvas - Screenshots with JavaScript</title> <meta name=viewport content="width=device-width, initial-scale=1.0"> <meta name=description content="Screenshot creation with JavaScript"> <meta name=author content="Niklas von Hertzen"> <base href=""/> <link href="style.css" rel=stylesheet> <style type="text/css">body{padding-top:60px;padding-bottom:40px}</style> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div class="navbar navbar-fixed-top"> <div class=navbar-inner> <div class=container> <a class="btn btn-navbar" data-toggle=collapse data-target=".nav-collapse"> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </a> <a class=brand href="index.html">html2canvas</a> <div class=nav-collapse> <ul class=nav> <li class="@LINK1@"><a href="index.html">Home</a></li> <li class="@LINK2@"><a href="about.html">About</a></li> <li class="@LINK3@"><a href="documentation.html">Documentation</a></li> <li class="@LINK4@"><a href="examples.html">Examples</a></li> <li><a href="https://github.com/niklasvh/html2canvas/downloads">Download</a></li> </ul> <p class="navbar-text pull-right" style="padding-top:5px;margin-bottom:-5px;"> <a href="http://twitter.com/share" class=twitter-share-button data-url="http://html2canvas.hertzen.com/" data-text="html2canvas - screenshots with #JavaScript" data-count=horizontal data-via=niklasvh>Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <g:plusone size=medium annotation=inline href="http://html2canvas.hertzen.com" width=250></g:plusone> </p> </div> </div> </div> </div> <a href="http://github.com/niklasvh/html2canvas"><img style="position: fixed; top: 0; right: 0; border: 0;z-index:9999;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <div class=container> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery||document.write('<script src="js/jquery-1.7.1.min.js"><\/script>');</script> <script type="text/javascript" src="js/html2canvas.js?rev032"></script> <script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://html2canvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#content").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#content").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#content").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script> <h1>JavaScript screenshot creator</h1> <form class="well form-search"> <label for=url>Website URL:</label> <input type=url id=url value="http://www.yahoo.com" class="input-medium search-query"/><button class=btn id=getscreenshot>Get screenshot!</button> </form> <label for=disablejs>Disable JavaScript (recommended, doesn't work well with the proxy)</label> <input type=checkbox id=disablejs checked/><br/> <small>Tested with Google Chrome 12, Firefox 4 and Opera 11.5</small> <h3>Recommended (tested) pages:</h3> <ul id=recommended> <li><a href="http://www.yahoo.com">yahoo.com</a></li> <li><a href="http://www.google.com">google.com</a></li> <li><a href="https://github.com/niklasvh/html2canvas">github.com</a></li> <li><a href="http://www.smashingmagazine.com">smashingmagazine.com</a></li> <li><a href="http://www.mashable.com">mashable.com</a></li> <li><a href="http://www.facebook.com/google">facebook.com/google</a></li> <li><a href="http://www.youtube.com/">youtube.com</a></li> <li><a href="http://www.cnn.com/">cnn.com</a></li> <li><a href="http://www.engadget.com/">engadget.com (lot of elements, very slow)</a></li> <li><a href="http://eu.battle.net/en/">battle.net</a></li> </ul> <h4> About</h4> <p> The whole screenshot is created with JavaScript. The only server interaction that is happening on this page is the proxy for loading the external pages/images into JSONP/CORS enabled page and onwards onto the JavaScript renderer script. There are a lot of problems of loading external pages, even with a proxy, and as such many pages will not render at all. If you wish to try the script properly, I recommend you get a copy of the source from <a href="https://github.com/niklasvh/html2canvas">here</a> instead. </p> <div id=content></div> <hr> <footer> <p> Created by <a href="http://hertzen.com">Niklas von Hertzen</a> <a href="https://twitter.com/Niklasvh" class=twitter-follow-button data-show-count=false>Follow @Niklasvh</a> <script>!function(e,a,f){var c,b=e.getElementsByTagName(a)[0];if(!e.getElementById(f)){c=e.createElement(a);c.id=f;c.src="//platform.twitter.com/widgets.js";b.parentNode.insertBefore(c,b)}}(document,"script","twitter-wjs");</script> </p> </footer> </div> <script src="script.min.js"></script> <script>var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-188600-10"]);_gaq.push(["_trackPageview"]);(function(){var b=document.createElement("script");b.type="text/javascript";b.async=true;b.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)})();(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();</script> <script src="http://hertzen.com/js/heatmap.min.js"></script> </body> </html>
0 commit comments