html2canvas failing because of undefined value for attribute
"borderTopLeftRadius"
I have been using Html2Canvas to build screen shots and uploading these
screen shots to a web server using a simple jsp servlet.
My Jquery code is failing because it can't find values for attribute
"*borderTopLeftRadiu*s".
My question is has anyone else had this problem using "html2canvas.js"?
Details are discussed below.
When I moved my code to a new web server and tried to "Take Screenshot of
Div Below" (will show code below),
My Firebug debugger ( Firefox 3.6.12 ) fails after the following call in
"html2canvas.js"
lines 199 to 203:
if (previousElement !== el) {
computedCSS = document.defaultView.getComputedStyle(el,null);
}
val = computedCSS[attribute]
where the attribute is "borderTopLeftRadius".
computedCSS returns an undefined value. Also note, this is happening in a
div tag called "target"
or el = "div#target". In fact, "html2canvas" has
ComputedCSSStyelDeclaration{} which has several attributes such as
"border-top-color", "border-top-width", etc, but I don't see
"borderTopLeftRadius".
the code snippet is shown below:
<html>
<head>
<title>Upload Html2Canvas to Server</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript"
src="js/jquery.plugin.html2canvas.js"></script>
</head>
<!-- note code sample extracted from
www.kubilayerdogan.net/?tag=html2canvas.
He has an excellent blog on using this tool developed by
Niklas Von Herzon.
-->
<body>
<form method="POST" enctype="multipart/form-data"
action="addImageHandler.jsp?type=page" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
<div id="target">
<center>
<div style="text-align: center; ">
<table border="1" width="90%">
<tr style="background-color: skyblue;">
<th>Log #</th><th>Date</th><th>Entry</th>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
function capture() {
$('#target').html2canvas({
onrendered: function(canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("myForm").submit();
}
});
}
</script>
</body>
</html>
No comments:
Post a Comment