html2canvas截屏文字重叠,使用 HTML 实现截图-html2canvas使用记录

前言

最近项目需求总是有HTML页面生成图片功能，所以就想记录一下自己在过程中遇到的问题，并加深印象，日后如果忘了也可以回顾。我们项目使用的是html2canvas插件，还有其他插件，例如dom-to-image、rasterizehtml，可以根据需求使用。

html2canvas使用问题汇总

项目中引入的是0.5.0-beta4版本的cdn链接,直接调用方法html2canvas(dom,options);第一个参数是你要绘制的dom对象，第二个参数是一些绘制的配置参数，个别参数我尝试了也没搞清楚具体什么作用可以自行看html2canvas文档，对于我用到的直接上代码：

// 生成图片

function generateImg() {

var shareContent = document.body;// 需要绘制的部分的 (原生)dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题

var width = shareContent.offsetWidth;  // 获取(原生)dom 宽度

var height = shareContent.offsetHeight;

var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

// var rect = shareContent.getBoundingClientRect();

var canvas = document.createElement('canvas');  //创建canvas 对象

var context = canvas.getContext('2d');