Clever Geek Handbook

結果キャッシングによるオンザフライでの画像処理のためのシンプルなソリューション

今日、画像を使用するほとんどすべてのWebアプリケーションでは、透かし、グレーの濃淡、セピアなど、追加の変更を加えてこれらの画像の小さなコピーを作成する必要があります。

詳細については、次の要件のリストを示します。



  1. 画像のサイズを任意のサイズに変更します（新しいサイズを追加しても頭痛の種になることはありません）
  2. 画像の修正：透かしの追加、グレースケール、セピア効果の適用、一般に新しい効果の追加は難しい作業ではありません
  3. 画像処理はメインストリームに影響を与えません（ページの読み込み速度）
  4. ページへの画像の読み込みを高速化するために、このソリューションでは、ブラウザーでの同時接続の制限、バイパス（ rus ）の制限をバイパスできるようにする必要があります
  5. サイズ変更パラメータを明示的にurlに渡すことにより、サーバーの目詰まりの可能性を回避します
  6. キャッシュ作業結果




解決策



そもそも、この問題を解決する手段の選択について議論します。 PHPで画像を操作するために考慮されたライブラリの中で、3つの主なものを特定しました： Wideimage 、 PHPThumb 、 Imagine 。 最初の2つは非常に長い間更新されておらず、それが不明であるため、私の選択は後者に落ちました。 このソリューションを採用したテンプレートエンジンとしてTwigを選択しました。 さて、WebサーバーとしてNginxとApacheを選択しました。 Nginx-専用サーバー用、および共有ホスティングの健全性用のApache。



GitHubリポジトリ



完成したソリューションは次のようになります。

PHPで 

echo thumb(__DIR__ . '/images/Chrysanthemum.jpg', '200x100', [ "watermark" => "right top" ]);


小枝に 

 <img src="{{ image|thumb("200x200", { "watermark": "right bottom", "grayscale": true }) }}" />


このフィルターを使用するには、Twigの拡張機能を接続する必要があります。 

 $twig->addExtension(new \Bazalt\Thumbs\Extension());




1.画像のサイズを任意のサイズに変更します


ご覧のように、 thumb



関数の2番目のパラメーターは画像のサイズを取ります。デフォルトでは、サイズが比例して縮小した後、側面の1つが上に出た場合、アルゴリズムはエッジを指定されたサイズにカットします。 パラメーターの1つが0に設定されている場合、画像は比例的に縮小され、2番目の辺のサイズが比例的に計算されます。たとえば、出力でサイズ「200x0」のパラメーターを持つサイズ400x300の画像のサイズは200x150、サイズは「0x200」-266x200になります。



2.画像​​の修正


画像修正の機能の拡張は非常に簡単です。 オペレーションクラスがあります。これは、基本バージョンにはsize



関数のみがあり、独自の機能を追加するには、クラスを継承し、必要な関数を記述するだけです。 thumb



関数の3番目のパラメーターは、これらの追加の修飾子を正確に呼び出す役割を果たします。これは、キーが関数の名前であり、この関数に渡されるオプションの値である配列です。



いくつかの修飾子の例 
 class Operations extends \Bazalt\Thumbs\Operations { public function watermark(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $imagine = new \Imagine\Gd\Imagine(); $wm = $imagine->open(__DIR__ . '/images/watermark.png'); $size = $image->getSize(); $wmSize = $wm->getSize(); list($x, $y) = explode(' ', $options); if (!is_numeric($x)) { $x = ($x == 'right') ? ($size->getWidth() - $wmSize->getWidth()) : 0; if ($x < 0) $x = 0; } if (!is_numeric($y)) { $y = ($y == 'bottom') ? ($size->getHeight() - $wmSize->getHeight()) : 0; if ($y < 0) $y = 0; } $point = new \Imagine\Image\Point($x, $y); return $image->paste($wm, $point); } public function grayscale(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $image->effects()->grayscale(); return $image; } public function sepia(\Imagine\Image\ImageInterface $image, $options, $allOptions) { $image->effects() ->grayscale() ->colorize(new \Imagine\Image\Color('#643200')); return $image; } }






3.メインストリームからの画像処理の削除


画像の数が増えるとページの読み込み速度も上がるため、コード内の画像をすぐに処理するのは悪いことです。 解決策は簡単です-処理された画像の生成は、要求があった場合のみです。 インターネットには多くの既製のソリューションがありますが、私が既に作成したものと異なるのは、GETリクエストパラメータまたはURL自体の一部の形式ではないURLに画像処理パラメータを保存することをお勧めしますが、特定の構成ファイルを作成し、そこに画像へのパスを書き込むことですサムネイルと他のすべてのオプション。 将来を見据えて、これは設定要件の5つのポイントも解決することをすぐに指摘したいと思います。



4.ブラウザでの同時接続の制限をバイパスする


HTTP 1.1標準によれば、ブラウザは同じドメインから同時に3つ以上のリクエストを読み込むことはできません。 解決策？ 静的なサブドメイン（ cookieless domain ）を同時にいくつか作成すると、余分なCookieが送信されないため、トラフィックが節約されます。



コードでは、次の3つのオプションのいずれかを使用できます。 

 //           //    -,  `php -S localhost:8080` \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', '/thumb.php?file=/static'); //       - \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', '/static'); //      -  cookieless  \Bazalt\Thumbs\Image::initStorage(__DIR__ . '/static', 'http://img%s.example.com/static'); //   %s     0x0-0xF    // img0.example.com, img1.example.com, ..., imge.example.com, imgf.example.com




大規模なプロジェクトではCDNオプションを検討していますが、これはこの記事の範囲外です。



5.サイズ変更パラメーターを明示的にurlに渡すことにより、サーバーの目詰まりの可能性を回避します


段落3で部分的に説明されているように、サムネイルが生成されるURLには、URL内のパラメーター列挙から保護する明示的なパラメーター表示はありません。 もちろん、要求パラメーターに加えて秘密鍵を生成し、サーバー上でチェックすることでこの問題を解決することは可能ですが、urlにパラメーターを渡すには独自の制限があると思います。 また、スクリプト要求がなくてもサムネイルをチェックするようにWebサーバーを構成できるという私の決定でプラスを強調したいと思います。



6.作業結果のキャッシュ


thumb関数は、設定ファイルがまだ存在しない場合、単純に生成します。 このファイルの名前は、処理パラメーターのハッシュと画像ファイル名によって計算されます。 構成ファイルの名前は、サムネイルの名前に拡張子を加えたものと一致します。 たとえば、アドレス「 /static/d1/7e/d17e248758722c42d8c88d21d8b538d7.jpg



」がサムネイルである場合、構成ファイルは「 /static/d1/7e/d17e248758722c42d8c88d21d8b538d7.jpg.pre



」と呼ばれます。

ブラウザーがサムネイルの2番目の要求を送信すると、処理は既に実行されています。



nginxの設定： 

 location /static/ { root /www/public; try_files $uri /thumb.php?file=$uri; }




Apacheの場合： 

 RewriteCond %{REQUEST_URI} ^(/static/) RewriteCond %{SCRIPT_FILENAME} !-f RewriteRule ^(.*)$ thumb.php?file=$1 [L]




設定からわかるように、ファイルが既に存在する場合、Webサーバーはそれを直接提供し、存在しない場合、thumb.phpファイルが呼び出され、サムネイルが作成されてディスクに保存されます

これらの設定は完璧ではなく、単にアイデアを示すためのものです。



その結果、このような頻繁なタスクに対する簡単な解決策があります。私が遭遇したすべての落とし穴を説明しようとしました。何かを見逃した場合は、一律のコメントに感謝します。


More articles:


All Articles