Skip to content

Commit 0cb252a

Browse files
niklasvhniklasvh
committed
add support for selecting single elements to render
1 parent d5040e1 commit 0cb252a

File tree

3 files changed

+220
-2
lines changed

3 files changed

+220
-2
lines changed

‎src/Renderer.js‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ html2canvas.Renderer = function(parseQueue, opts){
7777
i,
7878
queueLen,
7979
a,
80+
newCanvas,
81+
bounds,
8082
storageLen,
8183
renderItem,
8284
fstyle;
@@ -171,6 +173,34 @@ html2canvas.Renderer = function(parseQueue, opts){
171173
html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
172174

173175
// this.canvasRenderStorage(queue,this.ctx);
176+
queueLen = options.elements.length;
177+
178+
if (queueLen === 1) {
179+
if (options.elements[ 0 ] instanceof Element && options.elements[ 0 ].nodeName !== "BODY") {
180+
// crop image to the bounds of selected (single) element
181+
bounds = html2canvas.Util.Bounds( options.elements[ 0 ] );
182+
newCanvas = doc.createElement('canvas');
183+
newCanvas.width = bounds.width;
184+
newCanvas.height = bounds.height;
185+
ctx = newCanvas.getContext("2d");
186+
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
187+
delete canvas;
188+
return newCanvas;
189+
}
190+
} else {
191+
// TODO clip and resize multiple elements
192+
/*
193+
for ( i = 0; i < queueLen; i+=1 ) {
194+
if (options.elements[ i ] instanceof Element) {
195+
196+
}
197+
198+
}*/
199+
}
200+
201+
202+
203+
174204
return canvas;
175205
}
176206

@@ -384,11 +414,10 @@ html2canvas.Renderer = function(parseQueue, opts){
384414

385415

386416
//});
417+
387418

388419
return this;
389420

390421

391422

392423
};
393-
394-

‎src/plugins/jquery.plugin.html2canvas.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
$message = null,
1111
timeoutTimer = false,
1212
timer = date.getTime();
13+
options = options || {};
14+
options.elements = this;
15+
1316
html2canvas.logging = options && options.logging;
1417
html2canvas.Preload(this[0], $.extend({
1518
complete: function(images){

‎tests/origin.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
2+
<html>
3+
<head>
4+
5+
<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
6+
<script type="text/javascript" src="../build/html2canvas.js"></script>
7+
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
8+
<script type="text/javascript">
9+
$(document).ready(function() {
10+
$('#bar').html2canvas();
11+
// var ss = $('ul').offset();
12+
// alert(ss.left);
13+
});
14+
</script>
15+
<title>
16+
display/box/float/clear test
17+
</title>
18+
<style type="text/css">
19+
/* last modified: 1 Dec 98 */
20+
21+
html {
22+
font: 10px/1 Verdana, sans-serif;
23+
background-color: blue;
24+
color: white;
25+
}
26+
27+
body {
28+
margin: 1.5em;
29+
border: .5em solid black;
30+
padding: 0;
31+
width: 48em;
32+
background-color: white;
33+
}
34+
35+
dl {
36+
margin: 0;
37+
border: 0;
38+
padding: .5em;
39+
}
40+
41+
dt {
42+
background-color: rgb(204,0,0);
43+
margin: 0;
44+
padding: 1em;
45+
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
46+
height: 28em;
47+
border: .5em solid black;
48+
float: left;
49+
}
50+
51+
dd {
52+
float: right;
53+
margin: 0 0 0 1em;
54+
border: 1em solid black;
55+
padding: 1em;
56+
width: 34em;
57+
height: 27em;
58+
}
59+
60+
ul {
61+
margin: 0;
62+
border: 0;
63+
padding: 0;
64+
}
65+
66+
li {
67+
display: block; /* i.e., suppress marker */
68+
color: black;
69+
height: 9em;
70+
width: 5em;
71+
margin: 0;
72+
border: .5em solid black;
73+
padding: 1em;
74+
float: left;
75+
background-color: #FC0;
76+
}
77+
78+
#bar {
79+
background-color: black;
80+
color: white;
81+
width: 41.17%; /* = 14em */
82+
border: 0;
83+
margin: 0 1em;
84+
}
85+
86+
#baz {
87+
margin: 1em 0;
88+
border: 0;
89+
padding: 1em;
90+
width: 10em;
91+
height: 10em;
92+
background-color: black;
93+
color: white;
94+
}
95+
96+
form {
97+
margin: 0;
98+
display: inline;
99+
}
100+
101+
p {
102+
margin: 0;
103+
}
104+
105+
form p {
106+
line-height: 1.9;
107+
}
108+
109+
blockquote {
110+
margin: 1em 1em 1em 2em;
111+
border-width: 1em 1.5em 2em .5em;
112+
border-style: solid;
113+
border-color: black;
114+
padding: 1em 0;
115+
width: 5em;
116+
height: 9em;
117+
float: left;
118+
background-color: #FC0;
119+
color: black;
120+
}
121+
122+
address {
123+
font-style: normal;
124+
}
125+
126+
h1 {
127+
background-color: black;
128+
color: white;
129+
float: left;
130+
margin: 1em 0;
131+
border: 0;
132+
padding: 1em;
133+
width: 10em;
134+
height: 10em;
135+
font-weight: normal;
136+
font-size: 1em;
137+
}
138+
</style>
139+
</head>
140+
<body>
141+
<dl>
142+
<dt>
143+
toggle
144+
</dt>
145+
<dd>
146+
<ul>
147+
<li>
148+
the way
149+
</li>
150+
<li id="bar">
151+
<p>
152+
the world ends
153+
</p>
154+
<form action="./" method="get">
155+
<p>
156+
bang
157+
<input type="radio" name="foo" value="off">
158+
</p>
159+
<p>
160+
whimper
161+
<input type="radio" name="foo2" value="on">
162+
</p>
163+
</form>
164+
</li>
165+
<li>
166+
i grow old
167+
</li>
168+
<li id="baz">
169+
pluot?
170+
</li>
171+
</ul>
172+
<blockquote>
173+
<address>
174+
bar maids,
175+
</address>
176+
</blockquote>
177+
<h1>
178+
sing to me, erbarme dich
179+
</h1>
180+
</dd>
181+
</dl>
182+
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
183+
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
184+
</p>
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)