[英]html2canvas Unable to load image undefined
I am using the html2canvas in my project and getting the following issue:我在我的项目中使用 html2canvas 并遇到以下问题:
I'm trying to capture a div as an image and create a file type containing that image URL.我正在尝试将 div 捕获为图像并创建包含该图像 URL 的文件类型。 But the result is always showing 2680ms html2canvas: Unable to load image undefined after calling the **takeScreenShot function and not showing the image URL on button click.
但结果总是显示2680ms html2canvas: Unable to load image undefined after call the **takeScreenShot function and not display the image URL on button click. Any help regarding the issue?
对这个问题有什么帮助吗?
Here's the portion of the code I am using for canvas in my react app:这是我在 React 应用程序中用于画布的代码部分:
takeScreenShot(e) {
e.preventDefault();
let imageView = document.querySelector(".image_view_101");
html2canvas(imageView).then(canvas => {
console.log(canvas);
let imgData = canvas.toDataURL("image/png");
console.log("canvas", imgData);
});
}
I spend a lot of time on this and finally below script work for me I used the same function to generate pdf multiple places.I used it in Reactjs我花了很多时间在这上面,最后在脚本下面为我工作,我使用相同的函数在多个地方生成 pdf。我在 Reactjs 中使用它
Function:-功能:-
async printResult(){
const { canvasSelector, pdfName } = this.props;
if(canvasSelector !== undefined && pdfName !== undefined){
this.setState({ loader2: true });
let CurrentDate = new Date();
var pilotRhLogo = new Image();
pilotRhLogo.src = 'assets/images/logo.png';
var PDF_Heighti = document.querySelector('#'+canvasSelector).offsetWidth;
var HTML_Width = 790;
var HTML_Height = $('#'+canvasSelector).height();
var top_left_margin = 5;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = HTML_Height+(top_left_margin*2);
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
html2canvas($('#'+canvasSelector)[0],{allowTaint:true}).then((canvas) => {
canvas.getContext('2d');
//console.log(canvas.height+" "+canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
//var pdf = new jsPDF();
pdf.addImage(pilotRhLogo, 'PNG', 330, 10);
pdf.addImage(imgData, 'JPG', 10, 80);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -PDF_Heighti+(top_left_margin));
}
pdf.setFontSize(12);
pdf.setTextColor(108, 117, 125);
pdf.text(160, (PDF_Height-40),'© Copyright 5W PILOT RH SOLUTIONS '+ CurrentDate.getFullYear() +' – All right reserved – www.pilotrhsolutions.com.');
pdf.setTextColor(23, 162, 184);
pdf.setFontType("bold");
pdf.text(310, (PDF_Height-20), localStorage.getItem("userName").toUpperCase()+' - '+("0" + (CurrentDate.getDate() + 1)).slice(-2) +'/'+ ("0" + (CurrentDate.getMonth() + 1)).slice(-2) +'/'+ CurrentDate.getFullYear()+' - '+ CurrentDate.getHours()+':'+ CurrentDate.getMinutes());
pdf.save(pdfName+".pdf");
this.setState({ loader2: false });
});
}
}
How to call the function in Reactjs如何在 Reactjs 中调用函数
<button onClick={e => this.printResult(e)} className="btn btn-info mt-3 w-50">
<FormattedMessage id="btn.save.your.result" defaultMessage="SAVE YOUR RESULTS"/>
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.