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」に移動しました



All Articles