Come posso cambiare un'immagine usando CamanJS?

Question

Ho più immagini e mi piacerebbe caricarle ciascuna in un singolo elemento <canvas> in momenti diversi e quindi manipolarle usando CamanJS. Posso ottenere la prima immagine ad apparire in questo modo:

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

Ma poi quando ho seguito cerco di aggiornare lo stesso elemento utilizzando il seguente codice, non funziona.

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

C'è qualche modo per ripristinare/cancellare/svuotare la tela e caricare nuovi dati di immagine in esso, o ne ho veramente bisogno di creare distinte <canvas> elementi per ogni immagine che voglio caricare? Preferirei un singolo elemento perché non voglio mangiare tutta la memoria.

Answer 1

Ho appena capito questo con molte prove ed errori e poi un momento!

Invece di creare la mia tela direttamente nel mio html, ho creato un contenitore e poi appena fatto la seguente:

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

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

si desidera che la tela id per essere unico ogni volta che si accede alla funzione Caman con un nuovo Immagine.

Answer 2

Rimuovere l'attributo Caman (data-caman-id) dall'elemento IMG o CANVAS, modificare l'immagine e quindi eseguire nuovamente il rendering di 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

Il codice di speranza seguito può aiutare gli altri che lo richiedono.

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