html2canvas.js——HTML转Canvas工具

君山

我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。

布局

[HTML] 纯文本查看 复制代码

<div id="qianduanwz">
  <img src="./images/qrcode.jpg" alt="">
  <p>学习Web前端<br>关注前端微站</p>
</div>

[CSS] 纯文本查看 复制代码

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

转换

[JavaScript] 纯文本查看 复制代码

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