2011-12-15 23 views
0

画像このシナリオ: スケッチが表示され、その上に「空白の穴」領域がある私のサーバーに画像がローカルにあります。
その後、ユーザーは別の画像を自分のサーバーにアップロードできます。ドラッグ&ドロップで画像を結合(マージ)

達成しようとしているのはこれです: 画像のアップロードが完了すると、最初の画像(「穴」のある画像)が表示され、その背後にはユーザーの写真が表示されますそれは最初の写真の "空白の穴"領域を通過します。

これで、ユーザーは自分の写真を移動(ドラッグ&ドロップスタイル)できるので、「空白の穴」から見える領域を選択できます。 それから私は結果を保存したいと思います - 2枚の写真をマージするか、ユーザーの写真の位置をデータベースに保存して、後でもう一度表示できるようにします。
(多かれ少なかれthisのようなもの)

どのようなtechnollogyを探すべきですか?私はjavascript(ドラッグ&ドロップ)またはhtml5またはphp(写真をマージするため)と思いますか?
私が使用できるライブラリはありますか?

私の説明があまりにも厄介ではないことを願っています。

答えて

1

もっと良い解決策があるかどうかわかりませんが(私はそこにいると思いますが)、これはすべてあまりにも多くの問題を抱えていると思われます。ここで問題にアプローチするための一つの方法の荒廃です:

  1. サーバーに「彼」の画像をアップロードするユーザーを有効にするために、このようなuploadifyなどのJavaScriptパワード「アップロードウィジェット」を使用してください。サーバは、画像上で何らかの処理を行う(例えば、適切な寸法にサイズ変更およびトリミングする)。 PHPのgd library。 「準備済みの」画像のURLをブラウザに返します。このすべてをAJAX経由で返します。
  2. ブラウザにはユーザーの画像へのURLが含まれているため、より多くのJavascriptを使用すると、ページ内に表示する要素を動的に追加できます。 jQuery draggable。静的コンテンツ(「穴」を持つ画像)の背後にあるドラッグ可能な画像を合成することは、HTML、CSS、そしてやはりJavascriptを組み合わせて使用​​しなければならない細部です。
  3. ユーザーが終了したら、AJAX呼び出し(again jQueryなど)を使用して、サーバーに画像の位置を通知します(これは選択したJavasciptフレームワークの機能を通じて利用可能になります)。サーバーは2つのイメージを一緒に「構成」することができ(gdなど)、最終製品にアクセスするためのURLをブラウザに戻すことができます。

もちろん、ここで気を付けることはたくさんありますが、計画が何であるかを正確に知ることで、開始に役立つはずです。

1

PHP GDの拡張機能をご覧ください。それがインストールされている場合は、ユーザーがアップロードする2番目の画像の上にマージするイメージ(透明な中心を持つ)を持つのはかなり簡単です。

は、[はい画像の配置のためのJavaScriptのドラッグ&ドロップモジュールを使用し、始めるためhttp://php.net/manual/en/function.imagecopymerge.php

+0

返信いただきありがとうございます。私はimagecopolymergeについてお読みになりました(言及するのを忘れてしまった)。私が心配しているのは、それがreactangleの座標を使ってマージすることです。だから、円で作る方法を理解できません。あなたはどんな考えを持っていますか? – CrisDeBlonde

+0

また、Damenが述べたように、ユーザーがフレームに対してイメージを配置できるようにjavascriptを使用したいとします(x、y、およびscaleの値をGDで処理できるサーバーに渡します) 。 –

+0

あなたの出力イメージはどのようなフォーマットですか?もしそれがjpgになるならば、あなたのフレームは可視フレームの外に白い塗りつぶしにしてください。フレームとイメージの外側で透明になるよう最終製品を探しているなら、マージ後にこれらの指示に従ってください:http://stackoverflow.com/questions/4512477/php-proportionally-resize-and-cut-a-circle-out-of-a-square-image –

関連する問題