3

我正在通过 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 ( Noise2 )。然后Noise2（管道中的第三步）不会应用于图像的当前状态（即具有Noise1和Rotation的图像），而是应用于具有Noise1的图像。我认为问题应该与 Caman.js 中定义的渲染函数有关，但我自己无法解决。所以它没有按预期工作，请你帮我修复我的代码或给我一些关于调试代码的想法。

4

1 回答 1

0

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

rotate(1, function() {
    Caman(canvas, function() {
        this.reloadCanvasData();
    });
});
于 2019-09-16T09:17:14.103 回答