如何使用CamanJS更改图像？

Question

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

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

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

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

有没有办法重置/清除/刷新画布并将新的图像数据加载到其中,或者我真的需要为<canvas>我想要加载的每个图像创建单独的元素吗？我更喜欢单个因素,因为我不想吃掉所有的记忆.

Answer 1

从IMG或CANVAS元素中删除Caman属性(data-caman-id),更改图像,然后重新渲染Caman.

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

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

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

Answer 2

经过大量的试验和错误才弄清楚这个问题，然后是一个糟糕的时刻！

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

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

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

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