HTML生成图片

本章介绍一下如何把HTML转成图片，主要思路是用html2canvas这个插件生成把页面生成canvas，然后用canvas的toDataURL生成图片。

方程式

DOM + html2canvas => DOM=canvas + toDataURL("图片格式") = imgUrl(base64)

例子

// DOM
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
// JS
<script>
  html2canvas(document.querySelector("#capture")).then(data => {
    // data 就是生成的canvas
    document.body.appendChild(canvas);
    // canvas 有个api方法toDataURL把canvas转成base64
    const domImgUrl = canvas.toDataURL('image/png');
    console.log(domImgUrl)
  });
</script>

使用方式

html2canvas(DOM元素, 配置).then(canvas => {
  console.log('转换成的canvas', canvas);
  console.log('canvasToUrl', canvas.toDataURL('图片格式'));
})

例子

const body = document.querySelector('.demo');
html2canvas(body, {
      useCORS: true,
      logging: false,
      x: 0,
      y: window.pageYOffset, // 解决canvas截图有部分空白问题
    })
      .then(function(canvas) {
        const demoUrl = canvas.toDataURL('image/png');
        console.log(demoUrl)
      })
      .catch(e => {
        console.error('error--> ', e);
      });
  }

常用配置

useCORS: true/false 一般用来解决图片跨域true(允许)false(拒绝)
logging: true/false 生成canvas的日志信息，上线前设为false
x: x轴偏移量
y: y轴偏移量
height: canvas的高度
width: canvas的宽度

技巧

1. 可以通过window.screen.height来控制图片是否在保存后全屏显示
2. 图片跨域可以用useCORS: true解决

结束

用useCORS解决跨域只是一种方法还是其他方法可以尝试，总体来说，初级使用html2canvas可以满足常用需求。具体细节需要调试，如果页面中用了echarts会出现整体空白的问题。
有问题请评论，看到会回复。