camanjs - CamanJS：替换图像

Question

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

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

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

问题是当我重新上传新图像时。显然，CamanJS 保留了第一张图片，并且没有显示新图片。当我读到这个问题时，我找到答案的唯一地方是： CamanJS - 在应用过滤器/操作后更改底层画布

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

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

和：

Caman.reloadCanvasData(); 

等等

任何人都可以提供一个工作示例吗？谢谢

Answer 1

我想我会帮助那些来这里看看如何替换 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 2

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

类似以下的东西

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

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

Answer 3

当您需要原始图像时，只需调用 revert() ：

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