javascript screnshot html2canvas
http://html2canvas.hertzen.com/screenshots.html
HTML
<script src="http://html2canvas.hertzen.com/build/html2canvas.js?22"></script>
<script src="http://html2canvas.hertzen.com/build/jquery.plugin.html2canvas.js"></script>
<script src="http://www.hertzen.com/js/ganalytics-heatmap.js"></script>
<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;">
<h1>JavaScript screenshot creator</h1>
<label for="url">Website URL:</label>
<input type="url" id="url" value="http://www.naver.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 style="float:right;">
<div style="margin-left:17px;float:right;">
<!-- 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>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
</div>
<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>
...
CSS
a { color: #0B0B0B; background-color: #FDF9EE; padding: 0 8px; text-decoration: none; font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; } a:hover { color: #0B0B0B; background-color: #EFEBDE; padding: 0 8px; text-decoration: none; font: normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; } body { font: normal 14px/19px Arial, Helvetica, sans-serif; background-color: white; color: #4E4628; } textarea { background-color: #EFEBDE; color: #0B0B0B; border: #C3BCA4 1px solid; font: normal 11px Arial, Helvetica, sans-serif; width:300px; height:150px; } h2 { background-color: white; color: #0B0B0B; font: normal 28px/46px Georgia, "Times New Roman", Times, serif; margin:0; clear:both; } h3 { color: #786E4E; padding: 0 0 10px 55px; height: 37px; font: normal 24px/30px Georgia, "Times New Roman", Times, serif; } ul{ float:left; margin:0; } table{ margin:0 auto; width:400px; border:1px solid black; } #content{ clear:both; text-align:center; } #about{ padding:0 10px; width:450px; float:left; }
JavaScript
var date = new Date();
var message,
timeoutTimer,
timer;
var proxyUrl = "http://html2canvas.appspot.com";
function addRow(table,field,val){
var tr = $('<tr />').appendTo( $(table));
tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
}
function throwMessage(msg,duration){
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function(){
message.fadeOut(function(){
message.remove();
});
},duration || 2000);
$(message).remove();
message = $('<div />').html(msg).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(){
$('ul li a').click(function(e){
e.preventDefault();
$('#url').val(this.href);
$('button').click();
})
var iframe,d;
$('input[type="button"]').click(function(){
...