Skip to content

Commit a2247b5

Browse files
niklasvhniklasvh
committed
Add test version of 0.5 for console
1 parent 0015493 commit a2247b5

3 files changed

Lines changed: 145 additions & 1 deletion

File tree

‎screenshots_beta.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html ng-app="site">
3+
<head>
4+
<title ng-bind="title">html2canvas</title>
5+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
6+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
7+
<script src="/site/site.js"></script>
8+
9+
<base href="" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta name="description" content="Screenshot creation with JavaScript">
12+
<meta name="author" content="Niklas von Hertzen">
13+
14+
<link href="/site/css/bootstrap.min.css" rel="stylesheet">
15+
</head>
16+
<body>
17+
<header ng-include="'site/header.html'"></header>
18+
<div class="container" ng-view></div>
19+
<footer ng-include="'site/footer.html'"></footer>
20+
</body>
21+
</html>

‎site/screenshots_beta.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script src="/dist/html2canvas.js"></script>
2+
<script src="/dist/html2canvas.svg.js"></script>
3+
<script>
4+
var date = new Date();
5+
var message, timeoutTimer, timer;
6+
7+
function addRow(table,field,val){
8+
var tr = $('<tr />').appendTo( $(table));
9+
tr.append($('<td />').css('font-weight','bold').text(field)).append($('<td />').text(val));
10+
11+
}
12+
13+
function iframeLoad(iframe) {
14+
var body = $(iframe).contents().find('body').get(0);
15+
16+
html2canvas(body, {
17+
allowTaint: true,
18+
taintTest: false,
19+
logging: true
20+
}).then(function( canvas ) {
21+
$("#content").empty().append(canvas);
22+
$('#getscreenshot').prop('disabled', false);
23+
$('base').attr('href',"");
24+
});
25+
}
26+
27+
$(function(){
28+
$('#recommended a').click(function(e){
29+
e.preventDefault();
30+
$('#url').val(this.href);
31+
$('button').click();
32+
})
33+
34+
var iframe,d;
35+
36+
$('#getscreenshot').click(function(e){
37+
e.preventDefault();
38+
$(this).prop('disabled',true);
39+
var url = $('#url').val();
40+
$('#content').append($('<img />').attr('src','/site/img/loading.gif').css('margin-top',40));
41+
42+
var urlParts = document.createElement('a');
43+
urlParts.href = url;
44+
45+
$.ajax({
46+
data: {
47+
xhr2:false,
48+
url:urlParts.href
49+
50+
},
51+
url: "http://html2canvas.appspot.com/query",
52+
dataType: "jsonp",
53+
success: function(html){
54+
iframe = document.createElement('iframe');
55+
$(iframe).css({
56+
'visibility':'hidden'
57+
}).width($(window).width()).height($(window).height());
58+
$('#content').append(iframe);
59+
d = iframe.contentWindow.document;
60+
61+
d.open();
62+
63+
$(iframe.contentWindow).load(iframeLoad.bind(null, iframe));
64+
65+
$('base').attr('href',urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname);
66+
html = html.replace("<head>","<head><base href='"+urlParts.protocol+"//"+urlParts.hostname+"/" + urlParts.pathname + "' />");
67+
if ($("#disablejs").prop('checked')){
68+
html = html.replace(/\<script/gi,"<!--<script");
69+
html = html.replace(/\<\/script\>/gi,"<\/script>-->");
70+
}
71+
72+
d.write(html);
73+
d.close();
74+
}
75+
});
76+
});
77+
});
78+
</script>
79+
80+
<ul class="breadcrumb">
81+
<li><a href="/">Home</a> <span class="divider">/</span></li>
82+
<li><a href="/examples.html">Examples</a> <span class="divider">/</span></li>
83+
<li class="active">Test console</li>
84+
</ul>
85+
86+
<div class="page-header">
87+
<h1>JavaScript webpage renderer</h1>
88+
</div>
89+
90+
<p>
91+
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.
92+
There are a lot of problemii s 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.
93+
</p>
94+
<form class="well form-search">
95+
<label for="url">Website URL:</label>
96+
<input type="url" id="url" value="http://www.yahoo.com" class="input-medium search-query" /><button class="btn" id="getscreenshot">Get screenshot!</button>
97+
</form>
98+
99+
<label for="disablejs">Disable JavaScript (recommended, doesn't work well with the proxy)</label> <input type="checkbox" id="disablejs" checked /><br />
100+
<small>Tested with Google Chrome 12, Firefox 4 and Opera 11.5</small>
101+
102+
<h3>Recommended (tested) pages:</h3>
103+
104+
<ul id="recommended">
105+
<li><a href="http://www.twitter.com/niklasvh">twitter.com</a></li>
106+
<li><a href="http://www.yahoo.com">yahoo.com</a></li>
107+
<li><a href="http://www.jquery.com">jquery.com</a></li>
108+
<li><a href="http://www.google.com">google.com</a></li>
109+
<li><a href="https://github.com/niklasvh/html2canvas">github.com</a></li>
110+
<li><a href="http://www.smashingmagazine.com">smashingmagazine.com</a></li>
111+
<li><a href="http://www.mashable.com">mashable.com</a></li>
112+
<li><a href="http://www.facebook.com/google">facebook.com/google</a></li>
113+
<li><a href="http://www.youtube.com/">youtube.com</a></li>
114+
<li><a href="http://www.cnn.com/">cnn.com</a></li>
115+
<li><a href="http://www.engadget.com/">engadget.com (lot of elements, very slow)</a></li>
116+
<li><a href="http://eu.battle.net/en/">battle.net</a></li>
117+
</ul>
118+
119+
<div id="content"></div>

‎site/site.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
templateUrl:'site/screenshots.html',
1414
title: 'Test console'
1515
}).
16+
when('/screenshots_beta.html', {
17+
templateUrl:'site/screenshots_beta.html',
18+
title: 'Test console'
19+
}).
1620
when('/examples.html', {
1721
templateUrl:'site/examples.html',
1822
title: 'Examples for html2canvas'
@@ -48,4 +52,4 @@ function Navigation($scope, $location) {
4852
var currentRoute = $location.path() || 'index';
4953
return page === currentRoute ? 'active' : '';
5054
};
51-
}
55+
}

0 commit comments

Comments
 (0)