javascript - Caman.js 渲染适用于以前的状态而不是 Canvas 的当前状态

Question

我正在通过 javascript 创建一个简单的图像编辑器，用户应该能够在其中旋转图像以及应用一些由 Caman js 实现的滤镜。

我正在以下 Canvas 中绘制初始图像:

<canvas id="mainCanvas"></canvas>

在我的 javascript 中，我有以下用于处理 Canvas 的代码:

var canvasId = 'mainCanvas';
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext('2d');

为了旋转图像，我使用了以下按预期工作的函数:

function rotate(degree) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();

        var img = new Image();

        img.onload = function() {
            ctx.save();
            ctx.translate(img.width/2, img.height/2);
            ctx.rotate(degree * Math.PI / 180);
            ctx.drawImage(img, -img.width/2, -img.height/2, img.width, img.height);
            ctx.restore();

            processHistory('Rotate');
        };

        img.src = history[lastState];
    }

我可以多次旋转图像，每次旋转都应用到图像/ Canvas 的当前状态，并且没有任何问题。

除了旋转之外，我还有一个由 Caman js 实现的噪音按钮，如下所示:

Caman(canvas, val, function() {
        this.noise(val).render(function() {
            processHistory('Noise');
        });
    });

在多次旋转的情况下，我可以多次向图像添加噪声，并且每次将噪声应用于图像/ Canvas 的当前状态。

注意我的代码中的history是一个数组，用于保存被操作图像的状态，函数processHistory定义如下:

function processHistory(){
    history[lastState] = canvas.toDataURL();
    lastState = lastState + 1;
}

问题

考虑以下迭代 Noise1 --> Rotation --> Noise2，即在原始图像上应用 Noise1，然后应用 Rotation 和另一个 Noise(噪音2)。然后 Noise2(管道中的第三步)不应用于图像的当前状态(即具有Noise1和的图像>Rotation) 但对于带有 Noise1 的图像。我认为问题应该与 Caman.js 中定义的渲染函数有关，但我自己无法解决。所以它没有按预期工作，能否请你帮我修复我的代码或给我一些调试代码的想法。

Answer 1

我可以解决这个问题，这里有一个解决方案:只需使用以下回调调用旋转函数:

rotate(1, function() {
    Caman(canvas, function() {
        this.reloadCanvasData();
    });
});