关于html2canvas生成图片空白问题
关于html2canvas生成图片空白问题
框架react + mobx
"html2canvas": "^1.0.0-rc.7"
<div className="csbox">
111111111111111
<div onClick={this.exportImage}>
提交
</div>
</div>
var node = document.querySelector('.csbox')
html2canvas(node)
.then(canvas => {
console.log(canvas)
var data = canvas.toDataURL();//生成的格式
console.log(data)
})
.catch(err => {
console.log(err)
})
生成的图片
控制台输出
其他一些具体的细节私聊
网上找了各种方法都尝试过了，我的页面能生成图片，问题出在图片只是一张白图，这里明显不涉及到滚动条和图片跨域，就是想问一下有没有同样遇到这种情况的兄弟
找到问题所在了css样式的定义可能会导致页面截图失败，我把项目里的px转rem的文件注释掉，页面成功生成图片了
有可能是缩放问题，看一下sale的配置
是不是ios15 ？？ 如果是的话把需要生成图片的所有element的css font-family重置掉， font-family:'PingFangSC-Regular'改成这样就可以了
你是在什么环境下使用的？尝试设置一下宽度和高度。
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
});
Chrome
Maximum height/width: 32,767 pixels
Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
Firefox
Maximum height/width: 32,767 pixels
Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
Internet Explorer
Maximum height/width: 8,192 pixels
Maximum area: N/A
iOS
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
基于问题，给与建议
- 首先要了解html2canvas 图片的异步问题
- react 代码编译的问题 也存在异步的问题，你在render之后执行这个html2canvas 方法才能正确的拿到dom树节点，如果在render执行之前调用了html2canvas 那出来就是空白
- 如果前两者都没有异步的问题，那就看下图片的偏移配置参数，x，y的值得配置，useCORS的设置
备注：基于你的问题 我多半认为 是异步的代码问题 调整下代码异步执行顺序就可以
祝好
试了一下楼主的代码，类名不应该是class么，真的有className这样写类名的么，贴导出pdf的完整代码，但是如果页面超出13页会出现白页的问题，还没有找出解决办法，建议直接用打印的方法导出的pdf
const adom = document.querySelector('#demo').cloneNode(true);
adom.style.width="1000px";
adom.style.height=document.querySelector('#demo').scrollHeight+"px";
document.body.appendChild(adom)
setTimeout(function () {
html2canvas( adom, {
dpi: 300,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS:true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
} ).then( (canvas)=>{
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 595.28/contentWidth * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new JsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
//print number bottom right
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//可动态生成
pdf.save(pdfName);
document.body.removeChild(adom)
})
},200);
你可以把图片转成base64格式 然后再生成pdf
有个类似问题啊，一个跟你差不多的哥们已经解决了。https://ask.csdn.net/questions/7614662?answer=53642849&spm=1001.2014.3001.5504
PS：再看看React兼容性。
你试下下面代码，我把div的className改成了class
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script>
<div class="csbox">
111111111111111
<input type=button onclick="show()" value="提交"/>
</div>
<br/>
<script>
function show(){
var node = document.querySelector('.csbox')
html2canvas(node)
.then(canvas => {
document.body.appendChild(canvas)
})
.catch(err => {
console.log(err)
})
}
</script>
function getmbtimainImg(){
var targetDom = $("#main");
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
// $('body').append(copyDom);
html2canvas(copyDom, {
allowTaint: true,
taintTest: false,
onrendered : function(canvas) {
var data = canvas.toDataURL("image/png");//生成的格式
}
});
}