javascript將html轉為圖片保存。
阿新 • • 發佈:2017-05-07
canvas () color can 實現 data url pan his
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() }) }
利用html5的download屬性實現文件下載
javascript將html轉為圖片保存。