javascript - 绘图应用程序撤消按钮

Question

我的绘图应用程序的撤消按钮有问题

<input id="undo" type="image" src="images/undo.ico" onclick="cUndo()" width="25" height="25">

var cPushArray = new Array();
var cStep = -1;
var ctx;
// ctx = document.getElementById('myCanvas').getContext("2d");

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('myCanvas').toDataURL());
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}

但这不起作用。请帮忙

Answer 1

第一句话:正如 @markE 所强调的那样，使用 DataURL 保存会消耗很高的内存成本。您可以考虑将绘制命令及其参数保存在数组中。
寻找有关该主题的 tuts/Stack Overflow 帖子，从几篇帖子中您应该会得到一些不错的想法。

无论如何，您可以首先使用 dataURL 解决方案来让您的应用程序正常运行(限制为 20 次撤消或类似以避免内存爆炸)，然后您可以稍后改进撤消以达到更高的限制。< br/> 我更新了代码来处理这样的堆栈限制。

对于您的问题:应在设置 src 之前 Hook onload，但无论如何使用 DataURL 您都不是异步的:图像是立即构建的，因此无需 Hook 卸载。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

var historic = [];
var maxHistoricLength = 20; // might be more or less, depending on canvas size...

function saveForUndo() {
    historic.push(canvas.toDataURL());
    if (historic.length === maxHistoricLength +1) historic.shift(); 
}

function canUndo() {
  return (historic.length !== 0 );
}

function undo() {
    if (!canUndo()) return;
    var lastDataURL = historic.pop();
    var tmpImage = new Image();
    tmpImage.src = lastDataURL;
    ctx.drawImage(tmpImage, 0, 0); 
}