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

希望遵循的代码可以帮助那些有相同要求的人。

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

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

如何使用CamanJS更改图像？

3 个答案: