jsを使ってWebブラウザでイメージをトリミングし、それをサーバーに保存するには？

Question

私はいくつかのjQueryプラグインまたはsmthを探しています。

たとえば、ウェブサイトで写真を切り抜いて、結果をサーバーに保存する必要があります。

私はAdobe Flashでそれを行うには優れていることを知っているが、私は本当にJSを使用して行う必要があります。

Answer 1

チェックアウトjCrop。このようなものには最適です。あなたがここJCrop

を探している

Answer 2

はいくつかdemosです。

ここにはPHPで実装されているexampleがあります。

Answer 3

Javascriptで画像を選択し、最初にそれをサーバーにアップロードせずに操作するブラウザはごくわずかです。アップロードが完了すると、

を表示プレビュー用のブラウザのための扱いやすいサイズに（PHPで）画像のサイズを変更するユーザーがサーバー

に画像をアップロードすることを許可する

1. ：代わりに、あなたがする必要がありますユーザは、トリミング領域を選択した後、彼らは[保存]をクリックしますオン
2. を「保存」、それはトリミング持っているサーバー/ PHPにトリミングされた領域の座標を渡す必要がありJCrop
3. のようなもので、ブラウザでプレビュー画像をリサイズ元画像。プレビューの座標を元の画像の座標に合わせる必要があります。
4. 保存新しいイメージディスク/ S3 /何でもPHP
と

に私が今まで私のサーバーを使用したり、画像がhttp://transloadit.com/を使用して自分のサーバーに触れることなく、これを行うことができました。私はtransloaditのJavascriptアップロードフォームを使用してサーバーストレージ（S3）にアップロードし、オリジナルを保存し、プレビュー用にサイズを変更するテンプレートを使用します。オリジナルとプレビューの両方は、私のものではなく、Transloaditの一時的なS3アカウントに保存されています。その後、JCropを使用してプレビューを表示します。それらがクロップ領域を選択すると、元の写真をトリミングするようにトランスロードを指示しますが、いくつかのサムネイルサイズを作成するテンプレートを使用して、トリミング座標を使用してプレビューイメージから元のサイズに合わせて調整します。 Transloaditはすべての画像をS3アカウントに保存し、保存したURLを教えてくれます。