一、html2canvas生成图片空白
html2canvas是一个用于将html页面转换为Canvas对象的js插件,使用简单,可以用于在前端制作高清的图片、PDF文件等,但在使用过程中,一些人会遇到空白的问题。以下是可能的解决方案:
1、使用空div包住页面中需要保存的内容
<div id="capture">
<!-- 需要保存的内容 -->
</div>
html2canvas(document.querySelector("#capture")).then(canvas => {
// do something with canvas
});
2、手动设置元素的宽度和高度
html2canvas(element, {
width: element.offsetWidth,
height: element.offsetHeight
}).then(canvas => {
// do something with canvas
});
3、处理每个节点前的延迟加载动画效果
html2canvas(document.body, {
allowTaint: true,
useCORS: true,
async: false,
width: document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}).then(canvas => {
// do something with canvas
});
二、html2canvas转为pdf
将html2canvas生成的Canvas对象转为PDF,可以用jsPDF库,它可以生成包含文字、表格、图像等内容的PDF文档。
html2canvas(document.body).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('download.pdf');
});
三、html2canvas坑
html2canvas本身存在一些问题,在使用过程中需要小心。
1、html2canvas无法渲染视频和iframe
html2canvas无法渲染video标签和iframe内的内容,因为它们的内容不在DOM中。如果需要保存video标签的内容可以使用Whammy.js库。
2、html2canvas可能会出现跨域问题
当资源来自不同的域名或协议时,html2canvas可能会出现跨域问题。可以在调用html2canvas时加上useCORS: true参数。
3、html2canvas可能会出现生成图像大小不一致问题
如果在使用过程中发现生成的图像大小与预期不一致,需要手动设置所有涉及的元素的宽度和高度。
四、html2canvas options
html2canvas提供了很多配置选项,可以灵活地定制生成效果。
1、scale:调整生成的图像的缩放比例
html2canvas(document.body, {
scale: 2
}).then(canvas => {
// do something with canvas
});
2、backgroundColor:调整生成的图像的背景色
html2canvas(document.body, {
backgroundColor: '#FFFFFF'
}).then(canvas => {
// do something with canvas
});
3、proxy:配置代理服务器,用于解决跨域问题
html2canvas(document.body, {
proxy: 'https://proxy-server.com/proxy'
}).then(canvas => {
// do something with canvas
});
4、logging:开启日志记录
html2canvas(document.body, {
logging: true
}).then(canvas => {
// do something with canvas
});
五、html2canvas 参数 class选取
html2canvas的class参数用于选择需要截图的元素,同CSS选择器一样,可以选择类、ID、属性等。
1、选择类:'.className'
html2canvas(document.querySelector('.post')).then(canvas => {
// do something with canvas
});
2、选择ID:'#elementId'
html2canvas(document.querySelector('#myElement')).then(canvas => {
// do something with canvas
});
3、选择属性:'[data-attribute=value]'
html2canvas(document.querySelector('[data-name="John"]')).then(canvas => {
// do something with canvas
});
html2canvas可以很方便地用于前端制作图片、PDF等。但在使用过程中需要注意一些坑,并注意参数的灵活使用。