phpThumbOfを使用して画像を操作する

phpThumbOfは、人気のphpThumbスクリプトに基づくMODxのアドオンです。 さまざまなグラフィックライブラリを使用して、その場で画像を変更できます。

リポジトリからアドオンをインストールするプロセスについては説明しません。 既にダウンロードしてインストールしていると仮定します。

投稿を書いた理由は、公式のphpThumbOfドキュメントがひどいという事実です。 マヌスを読んだ後、表示されている画像を修正するために使用できる唯一の機能はズームクロップ(zoom-crop)であると考えました。 しかし、後で、いくつかの他のphpThumbオプションを使用しようとすると、それらがうまく機能することがわかりました!


PhpThumbOf Anatomy-出力フィルター


MODx出力フィルターを使用すると、ページに表示される直前に任意のフィルターセットを介して要素の値を実行できます。 構文は次のとおりです。
[[element:modifier = `value`]]

phpThumbOfを使用する最初で最も正しい方法は、「イメージ」タイプのTVパラメーターに追加される出力フィルターです。

ストーリーを完了するために、このようなtvパラメーターをテンプレートに追加する方法を示します。

開始するには、新しいtvパラメーターを作成し、適切と思われる名前を付けます。 私のオプション:


次に、「入力タイプ」タブで「画像」を選択します。


あとは、tvパラメーターの出力方法を指定するだけです(SRCを設定します)。

実験のために、面白い写真を選択します。 私はこれを見つけました:


ここで、作成した追加パラメーターの値として選択したカーテンをリソースで指定すると、構造を使用してリソースのコンテンツに表示できます。
<img src = "[[* tvImage]]" />

記事の冒頭で述べたように、出力フィルターはページに描画される前に要素を変更します。 tvパラメーターの値をphpThumbOf出力フィルターに渡します。
[[* tvImage :phpthumbof = `w = 120&h = 120` ]]

 注:tvパラメーターをテンプレートまたはチャンクに表示する場合、アスタリスク「*」をプラス「+」に置き換える必要があります:[[+ tvImage:phpthumbof = `w = 120&h = 120`]] 

その結果、リソース用に選択した画像に基づいて、120x120ピクセルにスケーリングされた新しい生成画像を取得します。 しかし、お気づきかもしれませんが、画像は元の画像の比率に違反して生じた白いフィールドに見えました。


これは非常に簡単に回避できます。幅または高さを指定しないでください。 固定幅のみを残しましょう:
[[+ tvImage:phpthumbof = `w = 120`]]

結果の画像は指定された幅でのみ拡大縮小され、高さは元の縦横比に比例します。


ご覧のとおり、画像のサイズ変更の可能性は無限に柔軟です。 幅が270ピクセルの別の例を次に示します。 さらに、元の画像以上のものを取得できますが、これは悪質な慣行です;)。
[[* tvImage:phpthumbof = ` w = 270`]]




正確な画像のトリミング


正確に120 x 120ピクセルのサイズの画像を取得したい場合は、トリミングできます。 これを行うには、トリミングオプション(zoom-crop) &zc=1.追加します&zc=1.
[[* tvImage:phpthumbof = `w = 120&h = 120 &zc = 1`]]

これで、正確な寸法で白い余白のない画像のトリミングされたバージョンができました。



PhpThumbフィルター-楽しみはまだ始まったばかりです


画像サイズの制御方法がわかったので、phpThumbフィルターの真の力を紹介します。 phpThumbで使用できるフィルターの例をいくつか示します。 前の例の最後にすべての新しいフィルターを追加することに注意してください。 さらに、彼らの位置は重要です! フィルターは左から右に適用されます。


ぼかし


[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = blur | 10` ]]




グレースケール(パレットをグレースケールに変換)


[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = gray` ]]




角を丸くする


[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = ric | 20 | 20` ]]



画像が「丸みを帯びている」場所では、画像の角が白いことに注意してください。 結果の画像をPNG形式に変換することにより、この問題を克服できます。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &f = png &fltr [] = ric | 20 | 20`]]




フレーム


定期的に、画像にフレームを追加する必要があります。 もちろん、これはCSSを使用して実行できます。 ただし、CSSが役に立たない場合もあります。 そのような例を紹介したいと思います。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &f = png&fltr [] = bord | 5 | 0 | 0 | FFFFFF&fltr [] = rot | -15 | E4F6FE` ]]




画像の回転


回転には少し説明が必要です。 隅の非グラフィック領域の背景色を指定する必要があります。 この例では、#006699、回転-45°を使用しています。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = rot | -45 | 006699` ]]



JPG =アーティファクトの数を減らしたい場合は、画質を上げることができます(1〜100)。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = rot | -45 | 006699 &q = 100`]]



透明な背景が必要な場合は、前に行ったように出力をPNGに変更するだけです。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = rot | -45 | &f = png `]]




カラーオーバーレイ


このフィルターを使用すると、画像に16進数の色を付けることができます。 最初の値はパーセンテージ、2番目の値は16進形式の色です。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = clr | 35 | 990033` ]]



2色の画像を取得する場合は、まずグレースケールフィルターを適用して画像の色を変更する必要があります。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1 &fltr [] = gray &fltr [] = clr | 35 | 990033`]]





シンプルなテキスト透かし。



phpThumbを使用すると、画像にテキストと画像の透かしを重ねることができます。 テキストの透かしの場合、サイズ、位置、透明度、TTFフォントを指定できます。

一般的に、利用可能なものはたくさんあります。 ドキュメントをよく理解することをお勧めします。

標準的なサーバーフォントに基づいた簡単な透かしを次に示します。
[[* tvImage:phpthumbof = `w = 120&h = 120&zc = 1&fltr [] = gray &fltr [] = wmt | Belafonte Code | 3 | T | FFFFFF || 100 | 20 | 0 || 0 | `]]




フィニッシュライン


おそらく私が話したかったのはそれだけです。 プロジェクトの公式ページに phpThumbの使用例があります。

PS ブログで「MODx CMS」を公開したかったのですが、いつものように、ハブでは十分なカルマがありませんでした。
PSSは「MODx CMS」に移動しました

Source: https://habr.com/ru/post/J131424/


All Articles