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

212
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();
@ -90,9 +91,9 @@ table{
timer; timer;
function addRow(table,field,val){ function addRow(table,field,val){
var tr = $('<tr />').appendTo( $(table)); var tr = $('<tr />').appendTo( $(table));
tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val)); tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
@ -187,17 +188,19 @@ 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;
}); });
}, },
ready: function(renderer) { ready: function(renderer) {
$('button').prop('disabled',false);
$("#content").empty(); $("#content").empty();
var finishTime = new Date(); var finishTime = new Date();
var table = $('<table />'); var table = $('<table />');
$('#content') $('#content')
.append('<h2>Screenshot</h2>') .append('<h2>Screenshot</h2>')
.append(renderer.canvas) .append(renderer.canvas)
@ -206,12 +209,12 @@ table{
addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds"); addRow(table,"Creation time",((finishTime.getTime()-timer)/1000) + " seconds");
addRow(table,"Total draws", renderer.numDraws); addRow(table,"Total draws", renderer.numDraws);
addRow(table,"Context stacks", renderer.contextStacks.length); addRow(table,"Context stacks", renderer.contextStacks.length);
addRow(table,"Loaded images", renderer.images.length/2); addRow(table,"Loaded images", renderer.images.length/2);
addRow(table,"Performed z-index reorder", renderer.needReorder); addRow(table,"Performed z-index reorder", renderer.needReorder);
addRow(table,"Used rangeBounds", renderer.support.rangeBounds); addRow(table,"Used rangeBounds", renderer.support.rangeBounds);
@ -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,53 +253,66 @@ 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="float:left;width:500px;"> <!-- <div style="background:red;padding:10px;color:#fff">
<h1>JavaScript screenshot creator</h1> 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>.
<label for="url">Website URL:</label> </div>-->
<input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button>
<!-- <input type="button" value="Try anyway" />--><br />
<small>Tested with Google Chrome 12, Firefox 4 and Opera 12</small> <div style="float:left;width:500px;">
<h1>JavaScript screenshot creator</h1>
<label for="url">Website URL:</label>
<input type="url" id="url" value="http://www.yahoo.com" /><button>Get screenshot!</button>
<!-- <input type="button" value="Try anyway" />--><br />
<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;">
<!-- Place this tag in your head or just before your close body tag --> <!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render --> <!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone> <g:plusone size="tall"></g:plusone>
</div> </div>
<div style="float:right;"> <div style="float:right;">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://html2canvas.hertzen.com/" data-text="html2canvas - screenshots with #JavaScript" data-count="vertical" data-via="niklasvh">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://html2canvas.hertzen.com/" data-text="html2canvas - screenshots with #JavaScript" data-count="vertical" data-via="niklasvh">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div> </div>
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
<h3>Recommended (tested) pages:</h3> <h3>Recommended (tested) pages:</h3>
<ul> <ul>
<li><a href="http://www.yahoo.com">yahoo.com</a></li> <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="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>
</ul> </ul>
<div style="float:left;"> <div style="float:left;">
<textarea id="logger"></textarea> <textarea id="logger"></textarea>
</div> </div>
<div id="about"><b> About</b><br /> <div id="about"><b> About</b><br />
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. 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.