HTML生成图片

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

方程式

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

例子

// DOM

    
Hello world!

// JS

使用方式

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会出现整体空白的问题。
有问题请评论，看到会回复。