html2canvals使用及问题总结

一、html2canvas：

html2canvas是一款通过将Dom节点在Canvas里面绘制出来进行H5页面截图，对动态渲染的H5页面进行截图是一个很好的选择。

二、使用

html

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

javascript

//生成图片
function generatePictures(container,callback){
    html2canvas(container,{
        useCORS:true,//允许跨域
        logging:true,//启用日志记录进行调试，生产改为false
        x:window.pageXOffset,
        y:window.pageYOffset,
        width:container.offsetWidth,
        height:container.offsetHeight,
    }).then(function (canvas){
        let base64 = canvas.toDataUrl('image/png');
        callback(base64);
    })
}

const base64 = '';
const container = document.getElementById('capture');
//调用函数，获取base64格式图片
generatePictures(container,function(img){
    base64 = img;
});

常见配置项

logging: 启用日志记录进行调试
imageTimeout: 加载图像的超时时间(毫秒)，设置为0可禁用超时，
ignoreElements: (element) => false 渲染忽略元素,
onclone:函数类型，在这里你可以操作生成canvas的dom的节点，不影响原始dom节点
removeContainer:布尔值，默认为true， 是否清理临时dom节点，
x:偏移x轴的距离，
y:偏移y轴的距离，
scrollX:渲染元素时x轴滚动的距离，
scrollY:渲染元素时y轴滚动的距离，
width:画布宽度,
height:画布高度,
scale: window.devicePixelRatio 用于渲染的比例，默认为浏览器设备像素比。

三、常见的问题

1.生成图片模糊

设置配置项：
scale:2//

2.图片不完整，或生成空白图片

// 1.可能是照片未加载完成就调用了生成图片的方法
	//在window.onload回调函数中调用。或者界面加载时设置定时器
	window.onload = function(){
      	const base64 = '';
        const container = document.getElementById('capture');
        generatePictures(container,function(img){
            base64 = img;
        });
    }
    
    window.setTimeOut(function(){
      	const base64 = '';
        const container = document.getElementById('capture');
        generatePictures(container,function(img){
            base64 = img;
        });
    }, 500)
// 2.图片存在跨域问题
	//设置配置项
	allowTaint: true,
	useCORS: true 
	或者将图片全部转化为base64编码，则不会存在img异步加载和跨域的问题
// 3.版本不兼容
	//尝试更换更高版本的html2canvas

1. 生成的图片字体大小与dom中不同

#capture{
    -webkit-text-size-adjust: 100% !important;
}

4.样式不一致

html2canvas对css3支持不友好，css属性支持情况：

Features | html2canvas

5.页面存在滚动条时，生成图片只有可视区域

y: window.pageYOffset,
windowHeight: document.body.scrollHeight
// 配置y轴方向起点和视窗高度