我正在使用pdf.js以自举模式显示.pdf文件。第一次可以正常运行,但是如果我退出模态,请再次调出模态,然后尝试转到下一页,则会出现此错误:
Cannot use the same canvas during multiple render() operations.
据我了解,它正在尝试再次渲染到同一画布上,这很有意义,因为我只隐藏了模态,而不取消渲染任务。就是说,我不知道如何阻止它。呼叫
ctx.clearRect(0, 0, canvas.width, canvas.height);
似乎无效。我该如何解决
下面的代码:
function openPDF(path, pageNumber) {
var pdfDoc = null,
currentPage = 1,
pageNum = parseInt(pageNumber),
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas = document.getElementById('pdf'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
pdfjsLib.getDocument(path)
.then(function (pdfDoc_) {
$("#pdfModal").modal();
$("#pdfModal").on('hide.bs.modal', function () {
//ctx.clearRect(0, 0, canvas.width, canvas.height);
//pdfDoc = null;
//renderContext = null;
//renderTask._internalRenderTask.cancel();
});
pdfDoc = pdfDoc_;
$("#page_count").text(pdfDoc.numPages);
if (pageNum >= 1 && pageNum <= pdfDoc.numPages) {
currentPage = pageNum;
queueRenderPage(currentPage);
} else {
toastr.error(`There is no page number ${pageNum} in the document`);
queueRenderPage(currentPage);
}
}).catch(function (e) {
console.log(e.message);
toastr.error(e.message);
});
$("#next").click(function () {
if (currentPage >= pdfDoc.numPages) {
return;
}
queueRenderPage(++currentPage);
});
$("#prev").click(function () {
if (currentPage <= 1) {
return;
}
queueRenderPage(--currentPage);
});
$("#pdfGoToInput").keypress(function (e) {
if (e.which === 13) {
var goToPageNum = parseInt($("#pdfGoToInput").val());
goToPage(goToPageNum);
}
});
$("#pdfGoToBtn").click(function () {
var goToPageNum = parseInt($("#pdfGoToInput").val());
goToPage(goToPageNum);
});
/*
* Get page info from document, resize canvas accordingly, and render page.
*/
function renderPage(num) {
console.log(pageRendering);
pageRendering = true;
pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
console.log("rendering page " + num);
var renderTask = page.render(renderContext);
$("#pdfModal").on('hide.bs.modal', function () {
renderTask.cancel();
//ctx.clearRect(0, 0, canvas.width, canvas.height);
//pdfDoc = null;
//renderContext = null;
//renderTask._internalRenderTask.cancel();
});
// Wait for rendering to finish
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
}).catch(function (e) {
pageNumPending = null;
console.log("page render: " + e);
toastr.error(e.message);
});
}).catch(function (e) {
console.log("get page: " + e);
toastr.error(e.message);
});
// Update page counters
$("#page_num").text(num);
}
//If another page rendering in progress, waits until the rendering is finished. Otherwise, executes rendering immediately.
function queueRenderPage(num) {
if (pageRendering) {
console.log("page is rendering, " + num +" added to queue");
pageNumPending = num;
} else {
console.log("rendering "+num);
renderPage(num);
}
}
function goToPage(goToPageNum) {
var numPages = pdfDoc.numPages;
if (goToPageNum > numPages || goToPageNum < 1 || !Number.isInteger(goToPageNum)) {
return;
}
pageNum = goToPageNum;
queueRenderPage(goToPageNum);
}
}