如何解决未捕获的TypeError:无法读取属性“ getContext”
大家好,我是JS新手,还在学习。既然这样了,我想在单击按钮时创建一个pdf。但是,我收到错误消息“未捕获的TypeError:无法读取null的属性'getContext'”。
我正在创建两个画布。第一个工作正常,但我不明白为什么第二个工作不工作。我已经搜索了该错误,并了解到该错误通常在html加载之前运行代码时发生。但是,我的脚本代码在正文的末尾。同样,即使在未引用第一个图像之前,第二个getContext('2d')也会发生错误。
function cPdf() {
// The code below creates a new canvas to draw the chart
//****************************************************************
var conHeight = document.getElementById("chart-container").offsetHeight;
var conWidth = document.getElementById("chart-container").offsetWidth;
var pdfCanvas = document.createElement("canvas");
pdfCanvas.id = "canvasPdf";
pdfCanvas.width = conWidth;
pdfCanvas.height = conHeight;
var pdfctx = pdfCanvas.getContext("2d");
var canvasHeight = document.getElementById("chart").offsetHeight;
var canvasWidth = document.getElementById("chart").offsetWidth;
pdfctx.drawImage(document.getElementById("chart"),canvasWidth,canvasHeight);
//*****************************************************************
// Chart copied on canvas and ready to be added to the pdf
// The code below creates a new canvas to draw the logo
//****************************************************************
var myCanvas = document.createElement("canvas");
myCanvas.setAttribute("id","logoCanvas");
myCanvas.width = 250;
myCanvas.height = 150;
//
var c = document.getElementById("logoCanvas");
var ctx = c.getContext("2d");
// var img = document.getElementById("logo");
// ctx.drawImage(img,0);
//*****************************************************************
// logo copied on canvas and ready to be added to the pdf
var pdf = new jsPDF('p','mm',"A4");
pdf.setFont("Lucida Grande");
pdf.addImage(pdfCanvas,'PNG',35,10);
source = document.getElementById("oTable");
margins = {
top: 80,bottom: 20,left: 20,width: 400
};
pdf.fromHTML(
source,margins.left,margins.top,{
// y coord
width: margins.width;
},function () {
pdf.save("Test.pdf");
},margins
);
}
'''
解决方法
document.getElementById
可以处理动态添加的元素。
您可以像第一个getContext()一样直接使用myCanvas。
// var c = document.getElementById("logoCanvas");
// var ctx = c.getContext("2d");
var ctx = myCanvas.getContext("2d");
如果您想在画布上使用queryElementById()
,则应在前面附加elemnet。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。