web-dev-qa-db-ja.com

サーバーに送信する前に画像をアップロードしてトリミング

アップロードとトリミング(ユーザーはトリミングする領域を選択できる必要があります)ブラウザで画像を送信し、次にトリミングされた画像を送信できるクライアントコンポーネント(jquery/swf)がありますサーバー?

私はasp.net-mvcを使用しています(重要かどうかはわかりません)

17
Omu

jcrop

Jcropは、Webアプリケーションに画像のトリミング機能を追加するためのすばやく簡単な方法です。典型的なjQueryプラグインの使いやすさと、使い慣れたデスクトップグラフィックアプリケーションに忠実な強力なクロスプラットフォームDHTMLクロッピングエンジンを組み合わせています。

20
CD..

Jcrop Image Pluginは、クロッピングUIを表示し、ブラウザでクロップされた座標を取得するのに適している場合があります。ただし、実際には画像はトリミングされません。したがって、トリミング処理はサーバー上で行われ、サーバーのパフォーマンスにかなり悪影響を及ぼします。

答え here は、ブラウザで画像をトリミングして画像をサーバーにトリミングします。 「Jcropプラグインを使用して画像をトリミングし、HTML 5キャンバス要素にトリミングされた領域を描画し、キャンバスをBLOBに変換し、AJAXによってサーバーに画像ファイルをアップロードします。

最も重要な部分は、canvasToBlob関数です。この関数は、HTML 5のcanvas要素を、画像としてサーバーにアップロードできるBlob型に変換します。残念ながら、このメソッドはAJAX=でのみ機能し、標準のHTMLフォーム要素に入力ファイルとしてBLOBを入れることができないため、フォームを直接送信することはできません。実際には、画像をトリミングするときに、フォームを使用して画像を直接送信します。

9
user4139457

この複雑なタスクを完了するには、クロップUIとアップローダーを組み合わせる必要があります。クロッピングUIはクロッピングUIの表示とクロッピング座標の提供を担当し、アップローダーは画像のクロップとサイズ変更、BLOBへの変換、サーバーへのアップロードを行います。

トリミングUIは一般的ですが、アップローダーを見つけるのは困難です。使いやすいトリミングUI ImgAreaSelect とこれ ploader はシンプルで拡張可能ですが、無料ではありません。

4
user4199643