把Html 页面转换成图片 保存下载 Html2canvas

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