<div class="container">
<p>
前往
<a href="https://html2canvas.hertzen.com/dist/html2canvas.min.js" target="_blank">
此处
</a>
下载html2canvas.js
</p>
<img src="http://img4.imgtn.bdimg.com/it/u=2153706307,1786056933&fm=26&gp=0.jpg" alt="">
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
<li>内容五</li>
</ol>
</div>
<p id="save">点此保存图片</p>
<p id="look">点此预览图片</p>
<hr>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
save.onclick = function(){
html2canvas(document.querySelector(".container"),{
useCORS:true,
logging:true,
}).then(canvas => {
var url = canvas.toDataURL('image/png')
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = name || '下载图片名称'
a.href = url
a.dispatchEvent(event)
});
}
look.onclick = function(){
html2canvas(document.querySelector(".container"),{
useCORS:true,
logging:true,
}).then(canvas => {
document.body.appendChild(canvas);
});
}
</script>