一、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
-
生成的图片字体大小与dom中不同
#capture{
-webkit-text-size-adjust: 100% !important;
}
4.样式不一致
html2canvas
对css3支持不友好,css属性支持情况:
5.页面存在滚动条时,生成图片只有可视区域
y: window.pageYOffset,
windowHeight: document.body.scrollHeight
// 配置y轴方向起点和视窗高度