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];
    }

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

除了旋转，我还有一个用Caman js实现的噪音按钮如下：

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

在多次旋转的情况下，我可以多次向图像添加噪声，每次将噪声应用于 image/canvas.

的当前状态

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

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

问题

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

Answer 1

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

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

Caman.js 渲染应用于之前的状态而不是 canvas 的当前状态

Caman.js render applies to previous state instead of current state of canvas

javascript

canvas

image-rotation

camanjs

问题