7

<canvas>複数の画像があり、それぞれを異なる時点で単一の要素にロードし、CamanJSを使用して操作したいと考えています。最初の画像を次のように表示できます。

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

しかし、その後、次のコードを使用して同じ要素を更新しようとすると、機能しません。

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

<canvas>キャンバスをリセット/クリア/フラッシュして新しい画像データをロードする方法はありますか、またはロードする画像ごとに個別の要素を作成する必要がありますか? すべてのメモリを使い果たしたくないので、単一の要素を好みます。

4

3 に答える 3

1

たくさんの試行錯誤を経て、これを見つけたところです。

キャンバスを HTML で直接作成する代わりに、コンテナーを作成してから、次のことを行いました。

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

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

新しい画像で Caman 関数にアクセスするたびに、キャンバス ID を一意にする必要があります。

于 2013-04-06T23:09:07.587 に答える