Как я могу изменить изображение с помощью CamanJS?

У меня есть несколько изображений, и я хочу загрузить их каждое в один элемент <canvas> в разные моменты времени, а затем манипулировать ими с помощью CamanJS. Я могу заставить первое изображение выглядеть так:

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

Но затем, когда я впоследствии пытаюсь обновить тот же элемент, используя следующий код, он не работает.

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

Есть ли способ сбросить/очистить/сбросить холст и загрузить в него новые данные изображения, или мне действительно нужно создавать отдельные элементы <canvas> для каждого изображения, которое я хочу загрузить? Я бы предпочел один элемент, потому что не хочу съедать всю память.


javascript html html5-canvas image-manipulation
person soapergem    schedule 22.02.2013    source источник
comment
Это действительно просто дикая догадка! У Caman есть метод replaceCanvas (в исходном коде). Итак, (1) Сохраните ссылку на объект Caman [ var theCaman=Caman('#canvas-element', '/images/one.jpg'); ] (2) Вручную нарисуйте новое изображение на холсте. (3) Обманите Камана, попросив его заменить холст на тот же холст [ theCaman.replaceCanvas(document.getElementById(canvas-element)); ]   -  person markE    schedule 24.02.2013

Ответы (3)


arrow_upward
15
arrow_downward

Удалите атрибут Caman (data-caman-id) из элемента IMG или CANVAS, измените изображение, а затем повторите визуализацию Caman.

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

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

Caman("#view_image", switch_img, function() {
  this.render();
});
person neurosnap    schedule 25.08.2013
comment
Отлично, спасибо, $("#view_image").removeAttr("data-caman-id"); был здесь настоящим самородком. - person GONeale; 18.01.2016
comment
Потратил несколько часов, пробуя разные способы, и только этот сработал! - person Alex Kartishev; 05.12.2017
comment
Да, это работает... но ваша опечатка ("data-camen-id" - caman, не camen!), которую я не замечаю, заставила меня потерять час... - person Tom; 24.07.2020

arrow_upward
4
arrow_downward

Надеюсь, что последующий код может помочь другим, у кого есть такие же требования.

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();
    });
}
person Arthur    schedule 05.09.2014

arrow_upward
1
arrow_downward

Только что понял это с большим количеством проб и ошибок, а затем момент!

Вместо того, чтобы создавать свой холст прямо в моем html, я создал контейнер, а затем просто сделал следующее:

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

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

Вы хотите, чтобы идентификатор холста был уникальным каждый раз, когда вы обращаетесь к функции Caman с новым изображением.

person user2253389    schedule 06.04.2013