javascript - Mozilla pdf.js 在多个渲染（）操作期间无法使用相同的画布

Question

我正在使用 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);
}
}

标签： javascriptpdfcanvas