Caman.js呈现适用于以前的州，而不是Canvas的当前状态答案

【问题标题】：Caman.js render applies to previous state instead of current state of canvasCaman.js呈现适用于以前的州，而不是Canvas的当前状态
【发布时间】：2023-04-03 04:07:01
【问题描述】：

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

我正在以下画布中绘制初始图像：

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

在我的 javascript 中，我有以下使用画布的代码：

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

我可以多次旋转图像，每次旋转都应用于图像/画布的当前状态，它可以正常工作。

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

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

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

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

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

问题

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

【问题讨论】：

标签： javascript canvas image-rotation camanjs

【解决方案1】：

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

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

【讨论】：