<html>
<head>
<title>test</title>
<script src="external/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL()
window.open(img);
});
</script>
</head>
<body>
<h1>Testing</h1>
<img src='http://localhost:8080/test/images/1.jpg'>
</body>
</html>
Shouldn't I be seeing a new window open up with this webpage as an image? What am I missing?
If you're new to html2canvas as I am- below is some boilerplate code to get you started. Hope it helps someone else.
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('body');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
// data is the Base64-encoded image
}
});
});
</script>
</head>
<body>
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
Note- I am using v0.34.
You can then use the toDataUrl() as a src tag in another html page (or whatever you want to do from here):
<html>
<head>
<meta charset="utf-8"/>
<title>TEST toDataUrl() DATA FROM PREVIOUS CODE PAGE</title>
</head>
<body>
<h1>Testing html2canvas</h1>
<img src='data:image/png;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuiP8BiMheRhil3yMAAAAASUVORK5CYII='>
</body>
</html>
Try putting your script into a $(document).ready() block. The script may be running before the rest of the document is ready.
![Prime Path[POJ3126] [SPFA/BFS]](https://oscimg.oschina.net/oscnet/e1200f32e838bf1d387d671dc8e6894c37d.jpg "Prime Path[POJ3126] [SPFA/BFS]")
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 神经病院院长 的文章《html2canvas basics》','https://www.manongdao.com/article-651238.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}