Skip to content

Commit

Permalink
add support for selecting single elements to render
Browse files Browse the repository at this point in the history
  • Loading branch information
@niklasvh
niklasvh committed Feb 20, 2012
1 parent d5040e1 commit 0cb252a
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 2 deletions.
33 changes: 31 additions & 2 deletions src/Renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ html2canvas.Renderer = function(parseQueue, opts){
i,
queueLen,
a,
newCanvas,
bounds,
storageLen,
renderItem,
fstyle;
Expand Down Expand Up @@ -171,6 +173,34 @@ html2canvas.Renderer = function(parseQueue, opts){
html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");

// this.canvasRenderStorage(queue,this.ctx);
queueLen = options.elements.length;

if (queueLen === 1) {
if (options.elements[ 0 ] instanceof Element && options.elements[ 0 ].nodeName !== "BODY") {
// crop image to the bounds of selected (single) element
bounds = html2canvas.Util.Bounds( options.elements[ 0 ] );
newCanvas = doc.createElement('canvas');
newCanvas.width = bounds.width;
newCanvas.height = bounds.height;
ctx = newCanvas.getContext("2d");
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
delete canvas;
return newCanvas;
}
} else {
// TODO clip and resize multiple elements
/*
for ( i = 0; i < queueLen; i+=1 ) {
if (options.elements[ i ] instanceof Element) {
}
}*/
}




return canvas;
}

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


//});


return this;



};


3 changes: 3 additions & 0 deletions src/plugins/jquery.plugin.html2canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
$message = null,
timeoutTimer = false,
timer = date.getTime();
options = options || {};
options.elements = this;

html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function(images){
Expand Down
186 changes: 186 additions & 0 deletions tests/origin.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>

<script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../build/html2canvas.js"></script>
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bar').html2canvas();
// var ss = $('ul').offset();
// alert(ss.left);
});
</script>
<title>
display/box/float/clear test
</title>
<style type="text/css">
/* last modified: 1 Dec 98 */

html {
font: 10px/1 Verdana, sans-serif;
background-color: blue;
color: white;
}

body {
margin: 1.5em;
border: .5em solid black;
padding: 0;
width: 48em;
background-color: white;
}

dl {
margin: 0;
border: 0;
padding: .5em;
}

dt {
background-color: rgb(204,0,0);
margin: 0;
padding: 1em;
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
height: 28em;
border: .5em solid black;
float: left;
}

dd {
float: right;
margin: 0 0 0 1em;
border: 1em solid black;
padding: 1em;
width: 34em;
height: 27em;
}

ul {
margin: 0;
border: 0;
padding: 0;
}

li {
display: block; /* i.e., suppress marker */
color: black;
height: 9em;
width: 5em;
margin: 0;
border: .5em solid black;
padding: 1em;
float: left;
background-color: #FC0;
}

#bar {
background-color: black;
color: white;
width: 41.17%; /* = 14em */
border: 0;
margin: 0 1em;
}

#baz {
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
background-color: black;
color: white;
}

form {
margin: 0;
display: inline;
}

p {
margin: 0;
}

form p {
line-height: 1.9;
}

blockquote {
margin: 1em 1em 1em 2em;
border-width: 1em 1.5em 2em .5em;
border-style: solid;
border-color: black;
padding: 1em 0;
width: 5em;
height: 9em;
float: left;
background-color: #FC0;
color: black;
}

address {
font-style: normal;
}

h1 {
background-color: black;
color: white;
float: left;
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
font-weight: normal;
font-size: 1em;
}
</style>
</head>
<body>
<dl>
<dt>
toggle
</dt>
<dd>
<ul>
<li>
the way
</li>
<li id="bar">
<p>
the world ends
</p>
<form action="./" method="get">
<p>
bang
<input type="radio" name="foo" value="off">
</p>
<p>
whimper
<input type="radio" name="foo2" value="on">
</p>
</form>
</li>
<li>
i grow old
</li>
<li id="baz">
pluot?
</li>
</ul>
<blockquote>
<address>
bar maids,
</address>
</blockquote>
<h1>
sing to me, erbarme dich
</h1>
</dd>
</dl>
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
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>.
</p>
</body>
</html>

0 comments on commit 0cb252a

Please # to comment.