如何更改了使用CamanJS的图像？(How can I change out an image u

我有多个图像，并且我想他们每个加载到单个<canvas>在不同的时间点元件，然后使用操纵它们CamanJS 。 我能拿到第一形象出现这样的：

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

但后来当我尝试随后使用下面的代码来更新相同的元素，这是行不通的。

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

是否有某种方式来重置/清除/刷新画布和新的图像数据加载到它，还是我真的需要创建单独<canvas>因为我想加载每个图像元素？ 我宁愿一个单一的元素，因为我不想吃了所有的记忆。

Answer 1:

除去从IMG或帆布元件的Caman属性（数据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:

希望跟随代码可以帮助别人谁拥有相同的要求。

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

你想在画布上的ID是唯一每次以崭新的形象进入Caman功能的时间。

文章来源: How can I change out an image using CamanJS?