CamanJS:替换图像

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

我想我应该帮助那些来到这里寻找如何替换像素数据的人，而不仅仅是加载的图像：

                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图像标记。在调用第二个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();
    });