7

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

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

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

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

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

4

3 回答 3

15

从 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();
});
于 2013-08-25T17:27:06.170 回答
4

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

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();
    });
}
于 2014-09-05T08:10:31.763 回答
1

只是通过大量的试验和错误才弄清楚这一点，然后是一个愚蠢的时刻！

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

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

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

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

于 2013-04-06T23:09:07.587 回答