c# - .Net と Javascript を使用して PNG をマスクとして画像をオーバーレイする

Question

ユーザーがフレーム画像をPNG形式でアップロードできるプロジェクトに取り組んでいます。フレームをアップロードした後、フレームの後ろに配置される写真をアップロードできます。写真のサイズを変更したり移動したりして、写真をフレームに収めることができます。作業に満足したら、作業を保存できます。

キャンバスはクライアント上で固定サイズです。これは ASP.Net MVC4 アプリケーションで、JavaScript / JQuery を使用しています。私は System.Drawing ライブラリを少ししか使用していませんが、これがどのように適合するかはまだわかりません。これが .Net と JavaScript / JQuery だけを使用して簡単に実行できる場合は素晴らしいことですが、JavaScript / JQuery と一緒にサードパーティの .Net ライブラリを使用することに反対しているわけではありません。

更新 ユーザーが画像のサイズ変更、移動、トリミングを行う手順を共有します。

ステップ 1: ユーザーが何らかの UI をクリックしてフレームをロードすると、432px x 348px の作業領域を持つポップアップが開きます。フレームは、透明な中央と外側のエッジを持つ PNG です。そのウィンドウには、ユーザーが画像をアップロードするための領域があります。図 1 でわかるように、画像は 100% で読み込まれ、ウィンドウを通過します。ユーザーは、画像を移動してトリミングするか、ステップ 2 に進むかを選択できます。

ステップ 2: ユーザーは画像を移動してハンドルを見つけ、画像のサイズを変更できるようにします。サイズを変更せずにこの時点でトリミングすることも、ステップ 3 に進むこともできます。

ステップ 3: ユーザーは画像のサイズを変更し、所定の位置に移動します。完了すると、アップロードされた画像がトリミングされます。

ステップ 4: これは、データがサーバーに送信されて処理された後の最終結果です。

Answer 1

純粋な.NETで実行できます。他のライブラリを使用する必要はありません。

アプリケーションに画像アップロード機能を追加するには、ここで答えを見てください：MVC4アプリケーションに写真をアップロードします。

透明度をサポートするpng形式のフレームを使用してユーザーに画像をアップロードさせる場合、ここのサンプルコードのように、ある画像を別の画像に描画できるはずです（gifが使用されています）：http：//www.daniweb .com / web-development / aspnet / threads / 112667/how-to-overlay-two-images-in-c。

他の形式（ jpgやbmpなど）のフレームもサポートできますが、このシナリオをサポートするには、元の画像に描画するピクセルを手動で選択する必要があります。最も簡単な解決策の1つは、色の1つを透明度キーにすることです。そのため、ピクセルがこの色の場合、結果の画像には描画されません。明るいピンクやめったに使用されない別の色を選択できます（またはユーザーが選択できるようにすることもできます）。それはまだそれほど複雑ではありません。購入するには、もう少しコードが必要です。高速化するための追加の作業と、フレーム画像の品質が悪い場合に同様のピクセルを検出するためのしきい値が必要です。

コードについてサポートが必要な場合は、お知らせください。