Here我在网上发现了这个小提琴，出于测试目的，也用于发布问题。
我已经在两天内尝试了一堆网站上的示例，但是没有运气，有人知道如何将一大堆html div / table放入图像文件吗？ 最好是PNG格式。
如果有人认为我忽略了一些有用的网站，请向我推荐它们， 下面的代码有一个按钮，当我单击它时它什么都不做，应该将内容下载为图像），所以我很拼命。
以前我有一个使用短div的东西，所以当div长于可见区域时，它将不被使用。因此，我正在尝试寻找解决方案，该解决方案能够将div /表导出到客户端图像。 HTML代码：
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand pull-left">Some Brand</span>
</div>
</div>
</nav>
<main class="container">
<ol class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Fake Link</a>
</li>
<li class="active">Fake Page thing</li>
</ol>
<div class="jumbotron">
<h1>Cool Export Test Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula quam a dolor ullamcorper iaculis. In et laoreet est, commodo placerat lectus. Sed ac ullamcorper diam. Curabitur id sem leo. Proin non dictum massa. Aliquam et dui ante</p>
<p>
<button type="button" class="btn btn-primary btn-lg" id="button1">Export 1</button>
</p>
</div>
<!--<img alt="" src="https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/evolving_google_identity_videoposter_006.jpg" class="image-responsive"/>-->
<h3>Another header!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
<div class="panel panel-primary">
<div class="panel-heading">Panel Heading</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Apples</th>
<th>Bananas</th>
<th>Carrots</th>
<th>Donuts</th>
<th>French Fries</th>
<th>Grapes</th>
<th>Ham</th>
</tr>
</thead>
<tbody>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
<tr>
<td>100%</td>
<td>Lorem ipsum dolor sit</td>
<td>0.2245</td>
<td>$1.25</td>
<td>1231235</td>
<td>asdf</td>
<td>11/11/12</td>
</tr>
</tbody>
</table>
</div>
<div class="well">
<h3>Okay this is probably enough data</h3>
<p>Finish strong with some lorem ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis tincidunt turpis. Praesent tempus suscipit lobortis. Nam viverra vehicula turpis, eu scelerisque lacus accumsan ac. Aliquam auctor vehicula nulla, a tincidunt lectus finibus non. Morbi eleifend auctor est ut maximus. Mauris nisl ante, euismod ac pellentesque eget, vestibulum non ex. Donec non nunc consectetur, volutpat erat in, ultricies arcu. Vivamus ac scelerisque lacus, eget porta lectus. Praesent ut tincidunt dolor.</p>
<p>Nullam est tortor, tempus eget mollis at, hendrerit non erat. Pellentesque dictum nibh nisi, eu ullamcorper sapien fringilla sed. Nullam rutrum sed nisi vel rutrum. Suspendisse venenatis nibh libero, sit amet feugiat purus condimentum in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra congue metus, et pretium elit. Morbi ut leo rutrum, blandit ante eget, semper dui.</p>
<p>Nunc sit amet tortor vitae erat mattis egestas. Quisque quis ultrices nulla. Mauris pretium tincidunt ipsum id semper. In ut congue ligula. Suspendisse porttitor feugiat molestie. Suspendisse vulputate consequat turpis, vel mollis ante ullamcorper et. Aliquam non leo velit. Nulla facilisi. Cras aliquet, augue tincidunt maximus blandit, justo augue feugiat lacus, ut euismod erat magna ut eros. Phasellus tincidunt ullamcorper sapien at accumsan. Fusce ut sapien pellentesque, blandit urna ut, tempus nibh. In eu tincidunt ipsum, ut pellentesque nisi. Aliquam erat volutpat. Duis a sagittis massa, eu mattis arcu.</p>
</div>
</main>
<footer>
<div class="container">This is a footer</div>
</footer>
</body>
</html>
CSS代码：
/* Styles go here */
body {
padding-top:70px;
min-width: 850px;
background: white;
}
footer {
border-top: 1px solid dodgerblue;
background: lightblue;
padding:28px 0;
}
.table td {
font-size: 12px;
}
JS：
$('#button1').on('click', function () { //dl img btn
html2canvas($("#container"), {
onrendered: function(canvas) {
//var a = document.createElement('a');
var img = canvas.toDataURL("image/png");
//window.open(img);
//downloadURI(myImage, canvas.png);
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#button1").attr("download", "canvas.png").attr("href", newData);
}
});
});