jquery - 画像を同じ高さと幅にトリミングしますか?

Question

500px.comのようなものについて話しています。すべての画像は同じ高さと幅で、そのようにレイアウトすると見栄えがします。私は少し探していましたが、これを達成するためのチュートリアルが見つからないようです。単純に画像のサイズを変更する方法は知っていますが、具体的にはこのようなものを探しています。

Answer 1

クライアント側で画像のサイズ変更/トリミングを行うのではなく、サーバー側の一連のユーティリティを使用してみてください。

サーバーで PHP を実行していて、ImageMagik をインストールできると仮定します (まだインストールされていない場合)。

Jue Wangs の"Opticrop" ライブラリをご覧ください

Answer 2

場合によります。ソース画像の高さと幅がすでに均一である場合、縦横比を維持しながらサイズを変更するのは簡単ですが、サイズを大きくすると最終的に歪みが発生します。

ただし、高さ/幅が異なる場合は、強制的に均一なサイズにするだけで歪みます。おそらくトリミングして、端の部分を緩める必要があります。これを行う最善の方法は、おそらく画像の中心を見つけて、そこから必要なアスペクトの幅と高さを計算することです.

その画像を取得したら、サイズを上下に変更できます。

ただし、サーバー側のコードでこれを行う方がおそらく高速/効率的です。