mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

updated test console

Browse Source
This commit is contained in:
Niklas von Hertzen 2011-07-28 21:24:45 +03:00
parent 2bf4724c2a
commit b523d263e4
1 changed files with 116 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
screenshots.html
View File

@ -5,83 +5,84 @@
<style type="text/css"> <style type="text/css">
a { a {
color: #0B0B0B; color: #0B0B0B;
background-color: #FDF9EE; background-color: #FDF9EE;
padding: 0 8px; padding: 0 8px;
text-decoration: none; text-decoration: none;
font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
} }
a:hover { a:hover {
color: #0B0B0B; color: #0B0B0B;
background-color: #EFEBDE; background-color: #EFEBDE;
padding: 0 8px; padding: 0 8px;
text-decoration: none; text-decoration: none;
font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
} }
body { body {
font: normal 14px/19px Arial, Helvetica, sans-serif; font: normal 14px/19px Arial, Helvetica, sans-serif;
background-color: white; background-color: white;
color: #4E4628; color: #4E4628;
} }
textarea { textarea {
background-color: #EFEBDE; background-color: #EFEBDE;
color: #0B0B0B; color: #0B0B0B;
border: #C3BCA4 1px solid; border: #C3BCA4 1px solid;
font: normal 11px Arial, Helvetica, sans-serif; font: normal 11px Arial, Helvetica, sans-serif;
width:500px; width:300px;
height:150px; height:150px;
} }
h2 { h2 {
background-color: white; background-color: white;
color: #0B0B0B; color: #0B0B0B;
font: normal 28px/46px Georgia, "Times New Roman", Times, serif; font: normal 28px/46px Georgia, "Times New Roman", Times, serif;
margin:0; margin:0;
clear:both; clear:both;
} }
h3 { h3 {
color: #786E4E; color: #786E4E;
padding: 0 0 10px 55px; padding: 0 0 10px 55px;
height: 37px; height: 37px;
font: normal 24px/30px Georgia, "Times New Roman", Times, serif; font: normal 24px/30px Georgia, "Times New Roman", Times, serif;
} }
ul{ ul{
float:left; float:left;
margin:0; margin:0;
} }
table{ table{
margin:0 auto; margin:0 auto;
width:400px; width:400px;
border:1px solid black; border:1px solid black;
} }
#content{ #content{
clear:both; clear:both;
text-align:center; text-align:center;
} }
#about{ #about{
padding:0 10px; padding:0 10px;
width:450px; width:450px;
float:left; float:left;
} }
</style> </style>
<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="build/html2canvas.js?22"></script> <script type="text/javascript" src="build/html2canvas.js?22"></script>
<script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="build/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript" src="http://www.hertzen.com/js/ganalytics-heatmap.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var date = new Date(); var date = new Date();
@ -187,6 +188,7 @@ table{
canvasHeight: d.body.scrollHeight, canvasHeight: d.body.scrollHeight,
canvasWidth: d.body.scrollWidth, canvasWidth: d.body.scrollWidth,
logging:true, logging:true,
proxyUrl: "http://html2canvas.appspot.com",
logger:function(msg){ logger:function(msg){
$('#logger').val(function(e,i){ $('#logger').val(function(e,i){
return i+"\n"+msg; return i+"\n"+msg;
@ -194,6 +196,7 @@ table{
}, },
ready: function(renderer) { ready: function(renderer) {
$('button').prop('disabled',false);
$("#content").empty(); $("#content").empty();
var finishTime = new Date(); var finishTime = new Date();
@ -227,7 +230,11 @@ table{
$('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/"); $('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/");
html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />"); html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/' />");
if ($("#disablejs").prop('checked')){
html = html.replace(/\<script/gi,"<!--<script");
html = html.replace(/\<\/script\>/gi,"<\/script>-->");
}
// console.log(html);
d.write(html); d.write(html);
d.close(); d.close();
@ -246,16 +253,28 @@ table{
}); });
</script> </script>
<script type="text/javascript">
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-188600-10']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
</script>
<base /> <base />
</head> </head>
<body> <body>
<!-- <div style="background:red;padding:10px;color:#fff">
App engine proxy is <a href="http://twitter.com/#!/Niklasvh/status/96265826713350144">temporarily out of use</a> due to exceeded bandwidth use. Please try again tomorrow or meanwhile check other examples <a href="http://html2canvas.hertzen.com/">here</a>.
</div>-->
<div style="float:left;width:500px;"> <div style="float:left;width:500px;">
<h1>JavaScript screenshot creator</h1> <h1>JavaScript screenshot creator</h1>
<label for="url">Website URL:</label> <label for="url">Website URL:</label>
<input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button> <input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button>
<!-- <input type="button" value="Try anyway" />--><br /> <!-- <input type="button" value="Try anyway" />--><br />
<small>Tested with Google Chrome 12, Firefox 4 and Opera 12</small>
<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>
</div> </div>
<div style="float:right;"> <div style="float:right;">
<div style="margin-left:17px;float:right;"> <div style="margin-left:17px;float:right;">
@ -282,11 +301,12 @@ table{
<li><a href="http://www.google.com">google.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="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.smashingmagazine.com">smashingmagazine.com</a></li>
<li><a href="http://www.cnn.com">cnn.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.facebook.com/google">facebook.com/google</a></li>
<li><a href="http://www.youtube.com/">youtube.com</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> <li><a href="http://eu.battle.net/en/">battle.net</a></li>