Skip to content

Commit 1498722

Browse files
brcontainerbrcontainer
committed
Update examples
1 parent 5a6ed07 commit 1498722

File tree

5 files changed

+244
-172
lines changed

5 files changed

+244
-172
lines changed

‎examples/google-maps-static.html

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -34,45 +34,22 @@
3434
background-color: rgba(0,0,0,.04);
3535
border-radius: 3px;
3636
}
37+
38+
#output {
39+
margin: .5em;
40+
padding: .5em;
41+
border-radius: .2em;
42+
background: #cfcfcf;
43+
}
44+
45+
#output > img {
46+
margin: .5em;
47+
background: #fff;
48+
box-shadow: 2px 2px 5px rgba(0,0,0,.5);
49+
}
3750
</style>
51+
3852
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
39-
<script>
40-
window.onload = function () {
41-
function convert(target) {
42-
html2canvas(target, {
43-
"proxy": "../html2canvasproxy.php",
44-
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
45-
"onrendered": function(canvas) {
46-
var img = new Image;
47-
48-
img.onload = function () {
49-
img.onload = null;
50-
document.getElementById("output").appendChild(img);
51-
};
52-
53-
img.onerror = function() {
54-
img.onerror = null;
55-
if(window.console.log) {
56-
window.console.log("Not loaded image from canvas.toDataURL");
57-
} else {
58-
alert("Not loaded image from canvas.toDataURL");
59-
}
60-
};
61-
62-
img.src = canvas.toDataURL("image/png");
63-
}
64-
});
65-
}
66-
67-
document.getElementById("save1").onclick = function () {
68-
convert(document.getElementById("static_map"));
69-
};
70-
71-
document.getElementById("save2").onclick = function () {
72-
convert(document.getElementById("container"));
73-
};
74-
};
75-
</script>
7653
</head>
7754
<body>
7855
<h1>Google Maps static and html2canvas</h1>
@@ -94,8 +71,44 @@ <h2>Maps example:</h2>
9471
</div>
9572
</div>
9673

74+
<hr>
75+
9776
<div id="output">
98-
<h1>Output results:</h1>
77+
<h2>Output results:</h2>
9978
</div>
79+
80+
<script>
81+
function convert(target) {
82+
html2canvas(target, {
83+
"proxy": "../html2canvasproxy.php",
84+
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
85+
"onrendered": function (canvas) {
86+
var img = new Image;
87+
88+
img.onload = function () {
89+
img.onload = null;
90+
91+
document.getElementById("output").appendChild(img);
92+
};
93+
94+
img.onerror = function () {
95+
img.onerror = null;
96+
97+
console.log("Not loaded image from canvas.toDataURL");
98+
};
99+
100+
img.src = canvas.toDataURL("image/png");
101+
}
102+
});
103+
}
104+
105+
document.getElementById("save1").onclick = function () {
106+
convert(document.getElementById("static_map"));
107+
};
108+
109+
document.getElementById("save2").onclick = function () {
110+
convert(document.getElementById("container"));
111+
};
112+
</script>
100113
</body>
101114
</html>

‎examples/google-maps.html

Lines changed: 75 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -29,75 +29,25 @@
2929
background-color: rgba(0,0,0,.04);
3030
border-radius: 3px;
3131
}
32+
33+
#output {
34+
margin: .5em;
35+
padding: .5em;
36+
border-radius: .2em;
37+
background: #cfcfcf;
38+
}
39+
40+
#output > img {
41+
margin: .5em;
42+
background: #fff;
43+
box-shadow: 2px 2px 5px rgba(0,0,0,.5);
44+
}
3245
</style>
3346

3447
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
3548
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
3649

3750
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
38-
<script type="text/javascript">
39-
var map = null;
40-
function initialize() {
41-
var parametreCarteVillage = {
42-
zoom : 9,
43-
center : new google.maps.LatLng(38.959409, -87.289124),
44-
disableDoubleClickZoom : false,
45-
draggable : true,
46-
scrollwheel : true,
47-
panControl : false,
48-
disableDefaultUI : true,
49-
mapTypeControl : true,
50-
keyboardShortcuts : true,
51-
mapTypeId : google.maps.MapTypeId.ROADMAP
52-
}
53-
map = new google.maps.Map(document.getElementById('map_canvas'), parametreCarteVillage);
54-
55-
56-
var marker = new google.maps.Marker({
57-
position:new google.maps.LatLng(38.959409,-87.289124),
58-
map: map,
59-
title: 'Title!'
60-
});
61-
}
62-
63-
window.onload = function () {
64-
initialize();
65-
66-
function convert(target) {
67-
html2canvas(target, {
68-
"proxy": "../html2canvasproxy.php",
69-
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
70-
"onrendered": function(canvas) {
71-
var img = new Image;
72-
73-
img.onload = function () {
74-
img.onload = null;
75-
document.getElementById("output").appendChild(img);
76-
};
77-
78-
img.onerror = function() {
79-
img.onerror = null;
80-
if(window.console.log) {
81-
window.console.log("Not loaded image from canvas.toDataURL");
82-
} else {
83-
alert("Not loaded image from canvas.toDataURL");
84-
}
85-
};
86-
87-
img.src = canvas.toDataURL("image/png");
88-
}
89-
});
90-
}
91-
92-
document.getElementById("save1").onclick = function () {
93-
convert(document.getElementById("map_canvas"));
94-
};
95-
96-
document.getElementById("save2").onclick = function () {
97-
convert(document.getElementById("container"));
98-
};
99-
};
100-
</script>
10151
</head>
10252
<body>
10353
<h1>Google Maps with html2canvas</h1>
@@ -117,8 +67,69 @@ <h2>Maps example:</h2>
11767
</div>
11868
</div>
11969

70+
<hr>
71+
12072
<div id="output">
121-
<h1>Output results:</h1>
73+
<h2>Output results:</h2>
12274
</div>
75+
76+
<script type="text/javascript">
77+
function initialize() {
78+
var parametreCarteVillage = {
79+
zoom : 9,
80+
center : new google.maps.LatLng(38.959409, -87.289124),
81+
disableDoubleClickZoom : false,
82+
draggable : true,
83+
scrollwheel : true,
84+
panControl : false,
85+
disableDefaultUI : true,
86+
mapTypeControl : true,
87+
keyboardShortcuts : true,
88+
mapTypeId : google.maps.MapTypeId.ROADMAP
89+
}
90+
91+
var map = new google.maps.Map(document.getElementById('map_canvas'), parametreCarteVillage);
92+
93+
var marker = new google.maps.Marker({
94+
position: new google.maps.LatLng(38.959409,-87.289124),
95+
title: 'Title!',
96+
map: map
97+
});
98+
}
99+
100+
initialize();
101+
102+
function convert(target) {
103+
html2canvas(target, {
104+
"proxy": "../html2canvasproxy.php",
105+
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
106+
"onrendered": function (canvas) {
107+
var img = new Image;
108+
109+
img.onload = function () {
110+
img.onload = null;
111+
112+
document.getElementById("output").appendChild(img);
113+
};
114+
115+
img.onerror = function () {
116+
img.onerror = null;
117+
118+
console.log("Not loaded image from canvas.toDataURL");
119+
};
120+
121+
img.src = canvas.toDataURL("image/png");
122+
}
123+
});
124+
}
125+
126+
document.getElementById("save1").onclick = function () {
127+
convert(document.getElementById("map_canvas"));
128+
};
129+
130+
document.getElementById("save2").onclick = function () {
131+
convert(document.getElementById("container"));
132+
};
133+
</script>
123134
</body>
124135
</html>

‎examples/html2canvas-0.4.1.html

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,69 @@
44
<meta charset="utf-8">
55
<title>html2canvas 0.4.1 with PHP proxy</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<style>
9+
#output {
10+
margin: .5em;
11+
padding: .5em;
12+
border-radius: .2em;
13+
background: #cfcfcf;
14+
}
15+
16+
#output > img {
17+
margin: .5em;
18+
background: #fff;
19+
box-shadow: 2px 2px 5px rgba(0,0,0,.5);
20+
}
21+
</style>
22+
723
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
24+
</head>
25+
<body>
26+
<div id="container">
27+
<h1>html2canvas 1.x with PHP proxy</h1>
28+
29+
<p>
30+
From imgur.com: <br>
31+
<img alt="google maps static" src="http://i.stack.imgur.com/BOzy5.png?s=128&g=1">
32+
</p>
33+
34+
<p>
35+
From githubusercontent.com: <br>
36+
<img alt="google maps static" src="https://avatars3.githubusercontent.com/u/18756527?s=400&u=008029f39e5f4e9f5420a0e9582c91232bd72292&v=4">
37+
</p>
38+
</div>
39+
40+
<hr>
41+
42+
<div id="output">
43+
<h2>Output results:</h2>
44+
</div>
45+
846
<script>
9-
window.onload = function(){
10-
html2canvas(document.body, {
47+
window.onload = function () {
48+
html2canvas(document.getElementById("container"), {
1149
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
1250
"proxy": "../html2canvasproxy.php",
13-
"onrendered": function(canvas) {
51+
"onrendered": function (canvas) {
1452
var img = new Image;
1553

16-
img.onload = function() {
54+
img.onload = function () {
1755
img.onload = null;
18-
document.body.appendChild(img);
56+
57+
document.getElementById("output").appendChild(img);
1958
};
2059

21-
img.onerror = function() {
60+
img.onerror = function () {
2261
img.onerror = null;
23-
if(window.console.log) {
24-
window.console.log("Not loaded image from canvas.toDataURL");
25-
} else {
26-
alert("Not loaded image from canvas.toDataURL");
27-
}
62+
63+
console.log("Not loaded image from canvas.toDataURL");
2864
};
2965

3066
img.src = canvas.toDataURL("image/png");
3167
}
3268
});
3369
};
3470
</script>
35-
</head>
36-
<body>
37-
<h1>html2canvas 0.4.1 with PHP proxy</h1>
38-
39-
<p>
40-
From githubusercontent.com: <br>
41-
<img alt="google maps static" src="https://avatars1.githubusercontent.com/u/4368952?v=2&amp;s=40">
42-
</p>
43-
<p>
44-
From facebook.com (with http redirect): <br>
45-
<img alt="facebook image redirect" src="https://graph.facebook.com/366239146811715/picture">
46-
</p>
4771
</body>
4872
</html>

0 commit comments

Comments
 (0)