どちらも配置後に何らかの処理が必要ですが、各グループには独自の特性があります。
タグスープから画像を取得する必要があるため、 最初の画像グループ （wysiwyg経由で挿入）を見つけるのは困難です。 しかし、そのような画像には、かなり単純な処理、比例したサイズ変更が必要になることがよくあります。 それは、ほとんどの場合、自動的に処理されず、サイト管理者に任せられているため、検出が複雑で処理が容易なためです。 それらは、その識字能力と怠さに応じて、サイトに投稿する前にサイズを変更するかどうかを決定します。 しかし、ときどき最もきちんとしたサイトの管理者でさえ、このことを気にせず 、画像がひどく長く読み込まれ、ブラウザによっては、レンダリング時に見栄えが悪くなったり遅くなったりすることがあります。 もちろん、スクリーンショットはまだ最悪のオプションではありません。 多くの場合、異なるサイトでは、3000ピクセル以上の解像度のカメラから写真を見つけることができます。
私の秘密を教えてください、私の同僚は未知のjevixプロジェクトの助けを借りてこの問題の解決に取り組んでいます。 彼はすぐにこのテーマに関する記事を公開すると思います。
画像の2番目のグループは 、処理用の画像を取得する単純さと、処理自体の複雑さによって特徴付けられます。 多くの場合、1枚の写真に対して、サイズと品質が異なる複数の画像、いわゆるサムネイルを作成する必要があります。 正直なところ、私は、膨大な数のライブラリと、武器庫に2つのパラメーターしか持たないサムネイルを作成する方法に驚いています-目的の画像の幅と高さ、そして時には、比率を維持するかどうかを意味する論理変数です。 一方、画像をトリミングするにはさまざまな方法があります。 それにもかかわらず、私の意見では、それらは完全に分類とアルゴリズム化に役立ちます。 それが私がトピックの大部分を捧げたいことです。
理論
そのため、アップロードされた画像があり、それらを表示する必要があるさまざまな場所があります。 シンプルなものから始めましょう-別のウィンドウ、またはライトボックス。 ユーザーがダウンロードを待つ必要がないように、アスペクト比を維持し、何らかの形で画像のサイズを制限する必要があります。 1024×768ピクセルとしましょう。これは、サイト上の写真に十分です。
ほとんどのライブラリは通常、この単純なタスクを使用してサムネイルを作成します（このようなサイズの画像はサムネイルとは呼ばれませんが、技術的な違いはありませんが、いくつかの規則に従って画像サイズを調整する必要があります）。
一部のライブラリでは、オプションで、比率が不要であることを示すフラグを指定できます。 結果は次のとおりです。
正直なところ、このようなスケーリングの方法が適切な場合には、私は一度も遭遇したことがありません。
大きな写真が整理されています。 実際のプレビューである小さなものはどうですか。 多くの場合、このようなプレビューは1つのリストに配置され、要件が追加されます-厳密に指定されたサイズが必要です。 しかし、以前のようにプロポーションを歪めることは不可能です。 どうする？ パディングを追加するのに役立ちます-サムネイルの下にプレーンな背景の場合はプレーン、または透明（これは最良のオプションではありませんが）。
しかし、そのようなパディングは少し場違いに見えることがあります。 しかし、画像が最大の側面に引き伸ばされ、すべての余分な部分が切り取られた場合、それはまさにそれです。
画像の切り取りはあまり人道的ではないように思えるかもしれません。 しかし、実際には、これはポスターとロゴのみです。 また、写真を切り取ると、多くの場合、重要なものは失われません。 しかし、写真を切り取るとき、別の機能があります-人々の顔は、ほとんどの場合、画像の上部にあります。 したがって、写真を切り抜くときに別のルールが課されます。下からよりも上から少し切り取る必要があります。
理想的には、結果の画像上のソース画像の位置を調整する必要があります。 下部のみ、または上部のみが重要である場合があります（たとえば、文字の場合）。
場合によっては、最初の写真とは正反対の方法で写真をカットする必要があります。 画像を特定のサイズ以下にする代わりに、特定のサイズ以上に小さくする必要があります。 そして、結果の長方形のエッジを超えて突き出ているすべてのものをトリミングする必要はありません。
座標の1つで特定のサイズが必要な場合があり、他の座標のサイズは任意です。
たとえば、記事の画像は、列の幅のちょうど半分を占める必要があります。 別の例は、彼らの映画のフレームです。
そして最近、私は次のタスクに直面しました：
アップロードするロゴは、固定された高さで同じ行になければなりません。 サイズを150×70に設定し、パディングを追加してサイズを厳守すると、幅の狭いロゴ（図の最初の部分）は幅150ピクセルすべてを占有します。 また、高さを固定するだけの場合、非常に低くて幅広のロゴ（2番目と3番目）は幅のスペースを取りすぎます。 解決策は私の分類にわずかな変化がありました。つまり、幅と高さが互いに独立して厳密または厳密ではないことに気付きました。 つまり この場合、アルゴリズムは次のようになりました-幅ではなく、高さを厳密に遵守したサイズ150×70ピクセルのプレビュー。
練習する
あなたが理解するように、これらの理論的な計算はすべて、実践なしでは一銭の価値もありません。 しかし、残念ながら、今日はコードがありません。 ほとんどの場合、いくつかの実装があり、それらは異なるプラットフォーム（PHPとDjango）向けであり、それらを少し整理する必要があるという事実のためです。 Djangoのバージョンを公開するとき、さらに多くの利点があり、ついでにPHPのバージョンに言及するので、それについて別の投稿をすると思います。
代わりに、プレビューごとに個別の関数を記述する時間を90％短縮する簡単なフラグとパラメーターのリストを提供したいと思います。
サイズ -幅と高さの2つの数字の配列。 任意の値（一度に両方ではない）を0（またはNULL）にすることができます。これは、このサイズを考慮する必要がないことを意味します。
method-サイズ計算方法。 「特定のサイズ以下」、「特定のサイズ以上」、または「特定のサイズ」のいずれかです。
enlarge-ブール値、小さな画像を拡大する。 誰もが好きではない、コード画像は100×100から1024×768に引き伸ばされる
厳密なサイズ -2つの論理値の配列。 これは、測定ごとに結果の画像のサイズが厳密に一致することを意味します。
align -2桁の配列。 結果のパーセンテージの元の画像のオフセットを、各測定ごとに個別に意味します。 結果の画像が大きい場合と小さい場合の両方。
バックカラー -パディングが塗りつぶされる色。