html2canvas.js——HTML转Canvas工具
我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。布局
<div id="qianduanwz">
<img src="./images/qrcode.jpg" alt="">
<p>学习Web前端<br>关注前端微站</p>
</div>
<style>
#qianduanwz{ width: 900px; height: 383px; text-align: center; background:
url("./images/bg.jpg") no-repeat center;}
#qianduanwz img{ width: 200px; margin-top: 60px;}
#qianduanwz p{ margin: 0; padding-top: 10px; font-size: 20px; color: #fff;}
</style>
转换
<script src="./scripts/html2canvas.js"></script>
<script>
new html2canvas(document.getElementById('qianduanwz')).then(canvas => {
// canvas为转换后的Canvas对象
let oImg = new Image();
oImg.src = canvas.toDataURL();// 导出图片
document.body.appendChild(oImg);// 将生成的图片添加到body
});
</script>
页:
[1]