Jak mogę zmienić obraz za pomocą CamanJS?

Question

Mam wiele obrazów i chciałbym załadować je każdy do pojedynczego elementu <canvas> w różnych punktach w czasie, a następnie manipulować nimi za pomocą CamanJS. Mogę dostać pierwsze zdjęcie, aby wyglądać tak:

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

Ale kiedy później próby aktualizacji tego samego elementu za pomocą następującego kodu, to nie działa.

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

Czy jest jakiś sposób aby zresetować/jasne/przepłukać płótno i załadować nowe dane obrazu do niego, albo czy naprawdę trzeba utworzyć osobne <canvas> elementy dla każdego obrazu chcę, aby załadować? Wolałbym jeden element, ponieważ nie chcę spożywać całej pamięci.

Answer 1

Właśnie wymyśliłem ten jeden z dużą ilością prób i błędów, a następnie chwilę!

Zamiast tworzyć moje płótna bezpośrednio w moim html, stworzyłem pojemnik i po prostu zrobił, co następuje:

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

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

Chcesz id płótno być unikatowy za każdym razem uzyskać dostęp do funkcji Caman z nowym obraz.

Answer 2

Usuń atrybut Caman (identyfikator-kamery-id) z elementu IMG lub CANVAS, zmień obraz, a następnie ponownie wyrenderuj 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 3

Nadzieję, że poniższy kod może pomóc innym, którzy mają takie same wymagania.

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