入门
html2canvas的简单调用：
// element是需要截图的元素 html2canvas（element，options）;
可用选项（options）
| 参数名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| allowTaint | boolean | false | 允许跨域 |
| useCORS | boolean | false | 貌似与跨域有关，但和allowTaint不能共存 |
| proxy | string | undefined | 代理地址 |
| taintTest | boolean | true | 是否在渲染前测试图片 |
| timeout | number | 0 | 图片加载延迟，默认延迟为0，单位毫秒 |
| logging | boolean | false | 在Console中输出信息 |
| width | number | null | canvas的宽度设定 |
| height | number | null | canvas的高度设定 |
| background | string | #fff | canvas的背景颜色（未指定则为透明） |
| letterRendering | boolean | false | 在设置了字间距的时候有用 |
特别的是，html2canvas提供了回调事件--onrendered来渲染canvas：
html2canvas（element，{
onrendered：function（canvas）{
// canvas是最终渲染的<canvas>元素
}
}）;完整参考代码
<script type="text/javascript">
$(document).ready(function() {
$(".jietu").on("click", function(event) {
event.preventDefault();
html2canvas(document.getElementById('main'), {
allowTaint: true,
taintTest: false,
logging: true,
height: $("#main").outerHeight(),
width: $("#main").outerWidth(),
onrendered: function(canvas) {
canvas.id = "mycanvas";
const dataUrl = canvas.toDataURL("image/png", 3.0),
newImg = document.createElement("img");
//document.body.appendChild(canvas);
//生成base64图片数据
newImg.src = dataUrl;
console.log(newImg);
// document.body.appendChild(newImg);
document.getElementById('tp').appendChild(newImg);
var timestamp = Date.parse(new Date());
//把截取到的图片替换到a标签的路径下载
$("#down1").attr('href', dataUrl);
//下载下来的图片名字
$("#down1").attr('download', timestamp + '.png');
$('.tishi,.tp-show').fadeIn();
}
});
});
});
</script>