質問: ### 前提・実現したいこと 以前にも画像処理に関して何度か質問させていただき、非常に参考になる回答を頂けたので、再び質問させていただきます。 現在、canvasを使用して画像処理を行っています。 中でも今取り組んでいることは、元画像に対して、表示されている画像から好きなものを選択し、合成する。というものです。 イメージとしては下記のサイトのようなものです。 http://foxhound.at.webry.info/201210/article_1.html そこで実現したい事としましては、一度選択して合成してしまった画像を、選択する前の状態に戻したいということです。 例えば、 元画像があり、選択肢1という画像を選択し、元画像と選択肢1を合成する。 その後合成した画像に対して、選択肢2という画像を選択し合成する。 その後、選択肢2を合成した画像が気に入らなかったため、選択肢2だけを除去し、選択肢1だけを合成した画像を表示させる。 といった感じです。 上記のサイトでは、選択肢が同じ場所に同じ形で合成されているため問題ないのですが、異なる場所に、異なる形の画像を合成する場合は問題があるかと... また、jQueryのclickイベントでhideさせたりshowさせるのではなく、合成したものを一つの画像として保存し画像処理したいと考えているため、canvasを用いています。 何か良い実現方法(アルゴリズム?)はありませんでしょうか? わかりにくい質問かとは思いますが何か回答を頂けると助かります_(._.)_ ### 試したこと 一度選択した画像をもう一度クリックすると、何も合成されていない元画像が表示されるようにしました。 しかしこれでは、消したくない選択肢の画像まで消えてしまうのでアウトですね...
回答: canvasを使用しているのであれば,表示画像をbinary形式あるいBASE64エンコーディングの状態でデータを保持できるはずなので,closureなどで一時的にbinaryを保持しておく変数を作っておけばいいのではないでしょうか。 ただし作りすぎると重くなってしまうので,トラックポイントを決めるといいと思います。