javascript - 如何使用 CamanJS 更改图像？

Question

我有多个图像，我想将它们分别加载到一个 <canvas> 中元素在不同的时间点，然后使用 CamanJS 操作它们.我可以让第一张图片看起来像这样:

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

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

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

有什么方法可以重置/清除/刷新 Canvas 并将新的图像数据加载到其中，还是我真的需要创建单独的 <canvas>我要加载的每个图像的元素？我更喜欢单个元素，因为我不想耗尽所有内存。

Answer 1

从 IMG 或 CANVAS 元素中删除 Caman 属性(data-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();
});