Javascript 如何使用CamanJS更改图像？

我有多个图像，我想在不同的时间点将它们加载到单个

元素中，然后使用。我可以得到第一张这样的图像：

Caman('#canvas-element', '/images/one.jpg');

但是，当我随后尝试使用下面的代码更新相同的元素时，它不起作用

Caman('#canvas-element', '/images/two.jpg');

---

有没有办法重置/清除/刷新画布并将新图像数据加载到画布中，或者我真的需要为每个要加载的图像创建单独的

元素？我更喜欢单个元素，因为我不想耗尽所有内存。

经过大量的尝试和错误，然后经过一个无聊的时刻，我才想出了这个元素

我没有直接在html中创建画布，而是创建了一个容器，然后执行以下操作：

var retStr = "<canvas id=\"" + myName + "Canvas\"></canvas>";
document.getElementById('photoFilterCanvasContainer').innerHTML = retStr;

Caman("#" + myName + "Canvas", myUrl, function() {
    this.render();
});

var retStr=”“；
document.getElementById（'photoFilterCanvasContainer'）。innerHTML=retStr；
卡曼（“#”+myName+“Canvas”，myUrl，function（）{
这个。render（）；
});

---

每次使用新图像访问Caman函数时，您都希望画布id是唯一的。

从IMG或canvas元素中删除Caman属性（数据Caman id），更改图像，然后重新渲染Caman

document
  .querySelector('#view_image')
  .removeAttribute('data-caman-id');

const switch_img = '/to/dir/img.png';

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

---

希望下面的代码可以帮助其他有同样需求的人

function loadImage(source) {
    var canvas = document.getElementById('image_id');
    var context = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
        context.drawImage(image, 0, 0, 960, 600);
    };
    image.src = source;
}

function change_image(source) {
    loadImage(source);
    Caman('#image_id', source, function () {
        this.reloadCanvasData();
         this.exposure(-10);
         this.brightness(5);
        this.render();
    });
}

---

这真是胡乱猜测！Caman有一个“replaceCanvas”方法（在源代码中）。因此，（1）保留对Caman对象的引用[var theCaman=Caman（“#canvas element”，“/images/one.jpg”）；]（2）手动将新图像绘制到画布中。（3） 愚弄卡曼，让它用相同的画布替换画布[theCaman.replaceCanvas（document.getElementById（“canvas元素”）；]非常感谢，

$（“#view_image”）.removeAttr（“数据卡曼id”）是这里真正的金块。花了几个小时尝试不同的方法，只有这个有效！是的，它是有效的。。。但是你的打字错误（'data-camen-id'-caman，不是camen！）让我损失了一个小时。。。