CamanJSを使用して画像を変更するにはどうすればよいですか？

Question

私は複数の画像を持っていますが、それぞれを<canvas>要素にそれぞれ異なる時点でロードしてから、CamanJSを使ってそれらを操作したいと思います。

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

しかし、私は、その後、次のコードを使用して、同じ要素を更新しようとすると、それから、それは動作しません：私はこのように最初に表示される画像を得ることができます。

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

/クリアをリセットするいくつかの方法があります/キャンバスをフラッシュし、そこに新たな画像データをロードする、または私は本当に私がロードするイメージごとに別々の<canvas>の要素を作成する必要がありますか？私はすべての記憶を食べたくないので、単一の要素を好むだろう。

Answer 1

多くの試行錯誤を繰り返して、この瞬間を思い出しました！代わりに私のhtmlで直接私のキャンバスを作成するので、私はコンテナを作成してからちょうど次のことをやった

：

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

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

あなたはキャンバスのidはあなたが新しいとCaman機能にアクセスするたびにユニークになりたいです画像。

Answer 2

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 3

希望のコードは、同じものを必要とする人を助けることができます。

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