Facebookがどのように機能するかはわかりませんが、jquery-uiresizeable()
とdraggable()
メソッドを使用します。画像を画像の正確な幅のdivに設定し、2番目のドラッグ可能/サイズ変更可能なdivを画像の上に配置することができます(より高いz-indexを使用)。そうすれば、ユーザーが動き回ったり調整したりできる半透明のトリミング領域ができます。両方のメソッドを親divに制限するように設定できるため、画像を超えてドラッグしたりサイズを変更したりすることはできません。
トリミングの準備ができたら、各コーナーの座標をajax経由でサーバーに送信できます。サーバーは、使用しているイメージクロッパー(phpでは使用しますgmagic -> cropimage()
)を実行でき、タスクが完了します。
トリッキーな部分は、完成品をユーザーに表示する方法を決定することです。気が変わった場合に備えて、新しいトリミングされた画像をtmpフォルダーに保存することを検討します。しかし、そうする場合は、ajaxに画像要素のsrcを更新させて、彼らが何をしたかを確認できるようにすることができます。気に入った場合は、「変更を保存」をクリックします。これにより、ajaxを介して別のリクエストが送信され、元のリクエストがtmpフォルダー内のものに置き換えられます。
Antoher、ちょっと卑劣なオプションは、pxlrを使用することです。彼らはjavascriptを介して彼らのサイトのツールを呼び出すことを可能にする開発者APIを持っています。ユーザーに表示される機能をカスタマイズして、サーバーに戻すことを意味する「reffer」に保存することができます。そのためのセキュリティを設定する方法はわかりませんが、サイトはそれに入ると確信しています。