javascript - 如何存储和恢复 Canvas 以再次使用它？

Question

我正在使用 PDF.js 在浏览器中显示 PDF。 PDF.js 使用 Canvas 来呈现 PDF。当用户双击 Canvas 时，我有 js 脚本在 Canvas 上绘制线条。它还添加了 X 复选标记以删除已绘制的线。

根据我的研究，我不能简单地从 Canvas 上删除线条，因为当你在上面画东西时，下面的像素就会消失。为了让它工作，我必须存储线条，然后清除 Canvas 并重新加载 Canvas 并重新绘制线条

问题我无法存储 Canvas 和恢复 Canvas 。当我点击 X 时，我能够重新绘制线条，但 Canvas 没有恢复。 Canvas 保持空白

在整页运行演示

$(function () {
    var $canvas = $("#myCanvas");
    var canvasEl = $canvas.get(0);
    var ctx = canvasEl.getContext("2d");
    var lines = [];

    var backupCanvas = document.createElement("canvas");



    var loadingTask = pdfjsLib.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');
    loadingTask.promise.then(function (doc) {
        console.log("This file has " + doc._pdfInfo.numPages + " pages");
        doc.getPage(1).then(page => {
            var scale = 1;
            var viewPort = page.getViewport(scale);
            canvasEl.width = viewPort.width;
            canvasEl.height = viewPort.height;
            canvasEl.style.width = "100%";
            canvasEl.style.height = "100%";

            var wrapper = document.getElementById("wrapperDiv");
            wrapper.style.width = Math.floor(viewPort.width / scale) + 'px';
            wrapper.style.height = Math.floor(viewPort.height / scale) + 'px';
            page.render({
                canvasContext: ctx,
                viewport: viewPort
            });

            storeCanvas();
        });
    });


    function storeCanvas() {
        backupCanvas.width = canvasEl.width;
        backupCanvas.height = canvasEl.height;
        backupCanvas.ctx = backupCanvas.getContext("2d");
        backupCanvas.ctx.drawImage(canvasEl, 0, 0);
    }

    function restoreCanvas() {
        ctx.drawImage(backupCanvas, 0, 0);
    }

    $canvas.dblclick(function (e) {
        var mousePos = getMousePos(canvasEl, e);
        var line = { startX: 0, startY: mousePos.Y, endX: canvasEl.width, endY: mousePos.Y, pageY: e.pageY };
        lines.push(line);
        drawLine(line, lines.length - 1);
    });

    function drawLine(line, index) {

        // draw line        
        ctx.beginPath();
        ctx.strokeStyle = '#df4b26';
        ctx.moveTo(line.startX, line.startY);
        ctx.lineTo(line.endX, line.endY);
        ctx.closePath();
        ctx.stroke();

        // add remove mark
        var top = line.pageY;
        var left = canvasEl.width + 20;
        var $a = $("<a href='#' class='w-remove-line'>")
            .data("line-index", index)
            .attr("style", "line-height:0")
            .css({ top: top, left: left, position: 'absolute' })
            .html("x")
            .click(function () {
                var index = $(this).data("line-index");
                $(".w-remove-line").remove();
                ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
                // restore canvas
                restoreCanvas();
                lines.splice(index, 1);
                for (var i = 0; i < lines.length; i++) {
                    drawLine(lines[i], i);
                }

            });

        $("body").append($a);

    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            X: Math.floor(evt.clientX - rect.left),
            Y: Math.floor(evt.clientY - rect.top),
        };
    }
});

 canvas {
        border: 1px solid red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b> Double Click on PDF to draw line and then click on X to remove lines</b>
<div id="wrapperDiv">
   <canvas id="myCanvas"></canvas>
</div>

Answer 1

PDF.js render() 函数是异步的，因此您需要在渲染完成后存储 Canvas 。您的代码过早触发 storeCanvas() 并存储空白 Canvas 。轻松修复，render() 返回一个 promise ，所以 ...

  page.render({
    canvasContext: ctx,
    viewport: viewPort
  }).then( () => {
    storeCanvas();
  });

https://jsfiddle.net/fyLant01/1/

引用:来自https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L998

  /**
   * Begins the process of rendering a page to the desired context.
   * @param {RenderParameters} params Page render parameters.
   * @return {RenderTask} An object that contains the promise, which
   *                      is resolved when the page finishes rendering.
   */