如何使用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-caman-id');

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

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

Answer 2

希望遵循的代码可以帮助其他有同样需求的人。

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();
    });
}

Answer 3

只是通过大量的试验和错误才弄明白了这一点，然后就是一瞬间！

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

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

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

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