PNGを変更してエクスポートする

Question

以前、私は一緒にフィットするように設計されたフォーラム署名に使用するさまざまなイメージを選択できるようにする小さなシステムを作成しました（下の画像例を参照）。これは現在、名前によって参照される一連のイメージ、イメージが格納されているフォルダ、イメージ名の接尾辞を持つことによって行われます。

私が望むすべてを修正できるシステムを作りたいと思います。私はそれを行うためのいくつかの異なる方法を見てみましたが、私がここでやろうとしていることをすることができる方法を見つけるのに失敗しました。

原画像はPhotoshopで作成され、バナーのタイプに基づいて個別のレイヤーに分割されます。理想的には、色（RGB、スライダなど）を変更したり、プリセットアイコンや独自のアイコンを変更したり、テキストを変更したりするシステムを作りたいと思っています画像。

結局のところ、私は画像がダウンロード可能で、サーバー側に保存されないようにしたいと思います。さらに、可能なすべてのバリエーションをエクスポートする必要なく、これを実行したいと思っています。これは、現行の方法ではすでに迷惑になっています。

TL; DR： ユーザーは、色、アイコン、またはテキストを変更するためにパラメータのセットを変更でき、その結果をPNG形式でダウンロードできますか？コードタイプは問題ではありません。私は喜んで学びますが、正しい方向を知りたいだけです。

興味のある方は、現在のコードをダウンロードしてください。

https://dl.dropboxusercontent.com/u/90098446/website.zip

例画像（白線を無視する）：バナー、アイコン、テキスト、および任意の涙：

Answer 1

各バナーは、4つの層を有しているように思えます。

個々のレイヤーを保存し、フロントエンドのjavascriptを使用してそれらをアセンブルします。パーツをスプライトシートとして配置すると、これをPhotoshopでの編集とプログラムでのアセンブリの両方に便利にすることができます。

結果をダウンロードする場合は、アセンブリの説明をバックエンドに送信し、バックエンドでイメージに組み込み、ダウンロード用のイメージを提供します。

Photoshopでそれぞれの可能性を手動で組み立てるのではなく、必要に応じてシステムに組み立てるようにします。

Answer 2

私は実際にこのようなことをしました。あなたのHTMLにcanvasを使用し、可能な画像の数を制限するか、場合によってはJavaScriptのfunctionを使用して、ユーザーが望むものを描く必要があります。これらの画像/ functionはあなたの画像であるものをプレビューすることができるように、そして物を変更するコントロールセットをユーザに可能にするためにcanvasにまとめられなければなりません。

このSO postは、canvasからpngを取得する方法を示しています。私はあなたが画像を完成させる保存ボタンを持っていることをお勧めします、そして、これは保存されるサーバーに画像を送るべきです。ダウンロード機能はその画像をダウンロードする必要があります。

私はこれを別の方法で行っています。私はcanvasをプレビューとして使用し、ユーザーが設定を完了したときに、最終的な画像がまとめられたJSONとしてサーバーに送信されました。