前言
最近项目需求总是有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');
var scaleBy = 3; //像素密度 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
canvas.height = height