javascript将html转为图片保存。
js将html转为图片主要是通过html2canvas这个插件去操作的。具体实现如下:
html部分:
<!--index.html-->
<div id="container">
this is a test page!!!
<i></i>
<button onclick="download()">download</button>
</div>
<script src="./bundle.js"></script>
javascript部分:
//index.js import './index.scss'; import html2canvas from 'html2canvas' window.download = () => { let container = document.getElementById('container') console.log(container) html2canvas(container).then(canvas => { let imgData = canvas.toDataURL() let link = document.createElement('a') link.href = imgData link.download = 'test.png' link.click() }) }
先利用html2canvas插件将html转为canvas,然后通过toDataURL()这个api将canvas转为base64,最后利用html5的download属性将图片下载下来。
代码:https://github.com/sunsl516/html2canvas-demo