Question

我正在使用CamanJS为我的网站添加一些图像处理功能，它是一个简单而且很棒的库，但它的文档仍然很差。

我正在将图像上传到我的网站，然后我将所有效果应用于上传的图像（它没有保存在服务器上，我在客户端修改它）。如官方网站（http://camanjs.com/guides/#BasicUsage）所示：

function invertColors() {
    Caman("#original-img", function () {
        this.invert().render();
    });
}

问题是当我重新上传新图片时。显然CamanJS保留了第一张图像，并且没有显示新图像。当我读到这个问题时，我找到答案的唯一地方是： CamanJS - change underlying canvas after applying filters/manipulations

但对不起答案对我来说不是那么清楚。所以我得再问一次。答案建议使用reloadCanvasData()，但我不确切知道如何使用它，我尝试了很多方法，但一切都徒劳无功！我试过了：

Caman("#original-img", function () {
    this.reloadCanvasData();
});

和

Caman.reloadCanvasData();

等

任何人都可以提供一个有效的例子吗？谢谢

Answer 1

只需在需要原始图片时调用revert（）：

Caman("#original-img", function () {
        this.revert();
        this.render();
    });

Answer 2

我以为我会帮助那些来到这里看看如何替换PIXEL数据的人，而不仅仅是一个加载的图像：

                can1 = document.getElementById("MyCanvas1");
                ctx1 = can1.getContext("2d");
                var c = <do what ever you need and make a new canvas here>
                ctx1.putImageData(c, 0,0);  // <---this replaces the pixeldata

                Caman("#MyCanvas1", function () {  
                    this.render();
                });

这样您可以在像素级处理图像，然后将其恢复为camanjs。

Answer 3

作为一种解决方案，我所做的就是清除画布并再次插入一个HTML Image标签。在调用Second Image.with camanjs之前

类似于以下内容

function clearCanvas() {
    $('#ImageParentDiv').empty();

    var htmlTag = '<img src="../images/Loading.gif" id="original-img">';
    $('#ImageParentDiv').html(htmlTag);
}

CamanJS：替换图像

3 个答案: