Question

如何修复此错误在多个 render() 操作期间无法使用同一个画布

2018-09-05

12895

reactjs html5-canvas

我在 React 中使用画布，并使用画布将 pdf 渲染为图像。

现在，当我获得新数据（即添加了另一个 pdf）时，就必须再次使用画布。

我不确定如何修复此错误，或者如何删除画布，甚至在再次使用画布之前清除画布。

这是相关代码：

 pdfLoop = (item,index) => {
        var that = this;
        PDFJS.getDocument(item).then(function getPdfHelloWorld(pdf) {
             //
             // Fetch the first page
             console.log('url is : ',item);
             pdf.getPage(1).then(function getPageHelloWorld(page) {
               var scale = 0.5;
               var viewport = page.getViewport(scale);


                   let cref = 'canvas'+index;
                   let imgref ='img'+index;
                   console.log('cref no : ',cref);
                   console.log('img no : ',imgref);

                   // Prepare canvas using PDF page dimensions
                   //
                   var canvas = that.canvasRefs[cref];
                   //let imagez = that.imageRefs[imgref];
                   var context = canvas.getContext('2d');
                   context.globalcompositeoperation = 'source-over';
                  // context.fillStyle = "#fff";
                  //draw on entire canvas
                  //context.fillRect( 0, 0, canvas.width, canvas.height );
                   canvas.height = viewport.height;
                   canvas.width = viewport.width;

                    //imagez.src = canvas.toDataURL("image/png");
                   //
                   // Render PDF page into canvas context
                   //
                   //page.render({canvasContext: context, viewport: viewport});
                   var task = page.render({canvasContext: context, viewport: viewport})
              task.promise.then(function(){
                //console.log(canvas.toDataURL('image/png'));
                let imgItem = {imgref:canvas.toDataURL('image/png'),page:index+1,rotate:0}

                 let newState = that.state.imgsrc;
                 newState[index] = imgItem;
                 //let newState = that.state.imgsrc.concat(imgItem);
                that.setState({
                    imgsrc:newState
                });
                //imagez.src = canvas.toDataURL('image/png')
              });

             });
           });
       }

Answer 1

如果有人偶然发现这一点，错误消息显示以下内容： 使用不同的画布或确保先前的操作已被取消或完成。

获取文档时，如果已经存在文档，则必须将其销毁。即：

PDFJS.getDocument({ url: pdf_url }).promise
    .then((pdf_doc) => {

        if (this.pdf_doc) {
            this.pdf_doc.destroy();
        }
        this.pdf_doc = pdf_doc;
        this.total_pages = this.pdf_doc.numPages;
    })

我不知道这是否是一个好的解决方案，但至少它对我有用。

Answer 2

在某些情况下，当 pdf 具有操作按钮（例如下一个/上一个或缩放）时，将显示此错误。在这种情况下，您通常有一个用于渲染 pdf 页面的函数，例如：

renderPage(num) {
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function (page) {
        const viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        const renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        page.render(renderContext);
    });
}

要修复错误，只需执行以下操作：

添加两个变量来控制冲突和缓存等待页码：

pageRendering = false; // 检查冲突
pageNumPending = null; // 缓存等待页码

按如下方式使用这些变量：

renderPage(num) {
if (this.pageRendering) { // 检查其他页面是否正在渲染
this.pageNumPending = num; // 缓存等待的页码，直到上一页渲染完成
} else {
this.pageRendering = true;
// 使用承诺获取页面
pdfDoc.getPage(num).then(function (page) {
const viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;

// 将 PDF 页面渲染到画布上下文中
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
const renderTask = page.render(renderContext);

// 等待渲染完成
renderTask.promise.then(function () {
this.pageRendering = false;
if (pageNumPending !== null) {
// 必须渲染等待的页面
this.renderPage(pageNumPending);
// 必须设置为 null 以防止无限循环
this.pageNumPending = null;
}
});
});

Answer 3

我遇到了和你完全相同的问题，但我的解决方案与之前发布的答案略有不同。

对我来说，问题在于我 不必要地通过状态更改重新渲染 。检查您是否没有在未正确清除画布的情况下重新渲染组件，或者您是否根本不需要重新渲染（就我而言，我不需要）。

希望这能有所帮助