html2canvas配置项
function captureImages(element){ // element = document.querySelector("#pageImg");
const canvas = await html2canvas(element, {
allowTaint: false,
useCORS: true,
tainttest: true, // 检测每张图片都已经加载完成
logging: false, // 是否开启打印日记
ignoreElements:(e)=>{
if(e.contains(element) || element.contains(e) || e.getAttribute('data-html2canvas') != null){
return false
}
return true
},
backgroundColor: `rgb(255,255,255)`, // 背景色，不要的话就null
})
let imgUrl = canvas.toDataURL("image/jpeg");
if(imgUrl == 'data:,') return ''
console.log(imgUrl);
return imgUrl
}
e.contains(element) || element.contains(e) 的意思是当前循环的节点是目标节点的父级或子急级，直接一步到位， 速度直接提升80%
e.getAttribute('data-html2canvas') != null 这个就是在节点上加了一个 data-html2canvas 属性,保留元素如css
<!DOCTYPE html> <html> <head data-html2canvas> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial- <link data-html2canvas rel="stylesheet" href="report.css" > </head> <body> <noscript> <strong>We're sorry but api-gateway-admin-front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>
过滤的时这个report.css会保留