Wie kann ich ein Bild mit CamanJS ändern?

Question

Ich habe mehrere Bilder bekam, und ich möchte sie sich in ein einziges <canvas> Element an verschiedenen Punkten in der Zeit laden und sie dann CamanJS mit manipulieren. Ich kann das erste Bild bekommen, so erscheinen:

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

Aber wenn ich dann später versuchen, das gleiche Element zu aktualisieren, den folgenden Code verwenden, funktioniert es nicht.

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

Gibt es eine Möglichkeit/clear zurückgesetzt/die Leinwand spülen und neue Bilddaten in sie laden, oder brauche ich wirklich getrennte <canvas> Elemente für jedes Bild, das ich zu ladende zu schaffen? Ich würde ein einzelnes Element bevorzugen, weil ich nicht die gesamte Erinnerung auffressen möchte.

Answer 1

Nur diese ein rechnete mit einer Menge von Versuch und Irrtum und dann einem duh Moment!

Statt meine Leinwand direkt in meinem html schaffen, habe ich einen Behälter und dann habe gerade folgendes:

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

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

Sie wollen, dass die Leinwand-ID eindeutig sein jedes Mal, wenn Sie die Caman Funktion mit einem neuen Zugang Bild.

Answer 2

entfernen Caman attribute (data-Caman-id) vom IMG oder Leinwand Elemente, um das Bild ändern, und dann Caman wieder machen.

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

Hope gefolgt Code kann anderen helfen, die gleiche erfordern.

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