html2canvas基础 | toDataURL

本文介绍了html2canvas基础的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

    <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?

推荐答案

如果您是html2canvas的新手，以下是一些入门指南.希望对别人有帮助.

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>

注意-我正在使用v0.34.

Note- I am using v0.34.

然后，您可以将 toDataUrl()用作另一个html页面中的src标记(或您想从此处执行的任何操作):

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>

这篇关于html2canvas基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！