imgタグにサムネイル画像表示

PHPでimgタグにサムネイル画像表示

  • imageをhttp経由で取得し、加工するまでの手順
  • Imagickを使った事なかったのでImagickクラスが利用出来るまでの設定メモ
  • Imagickはpeclでインストールする必要がある

サムネイル表示について利用①と利用②と試してみたが、サムネイル作成時に吐き出すtmpファイルは サーバに残したくないので、利用①で本実装する事にした。

20160227追記 方法③として、そもそもImagikを使わずタグのwidth/heightで対応する方法も追記

使ってみて

  • めちゃ面白いし便利

公式Imagickサンプル

http://php.net/manual/ja/imagick.examples-1.php

<?php

header('Content-type: image/jpeg');

$image = new Imagick('image.jpg');

// 幅あるいは高さに 0 を指定すると、
// 元の画像のアスペクト比を維持します
$image->thumbnailImage(100, 0);

echo $image;

?>

利用① imgタグにbase64_encodeした画像を指定

  • 理解出来ていない部分
    • getImageBlobで出力しているが、実態はどこでファイルを保持しているのか？
<?php
$filename = "https://xxxxxxxxxxxx.jpg"; // 読み込むファイル
$thumbImg = new Imagick($filename); // Imagickのコンストラクタに指定
 
/* サムネイルの作成 */
$thumbImg->thumbnailImage(60, 0); // width/height どちらかを0にすると比率を保持

/* ブラウザの出力 */
header("Content-Type: text/html");
echo '<img src="data:image/jpg;base64,'.base64_encode($thumbImg->getImageBlob()).'" alt="" />';
$thumbImg->clear();

利用② thumbnailImageで生成したtmpファイルを保持する

  • tmpファイルの削除タイミング
    • html表示時は保持している必要があるため、処理開始時にtmpファイルを全消しするか？
<?php
$filename = "https://xxxxxxxxxxxx.jpg"; // 読み込むファイル
$thumbname = "thumb1.jpg"; // サムネイルのファイル名
$thumbImg = new Imagick($filename); // Imagickのコンストラクタに指定
 
/* サムネイルの作成 */
$thumbImg->thumbnailImage(100, 0); // width/height どちらかを0にすると比率を保持
$thumbImg->writeImage($thumbname);
 
/* ブラウザの出力 */
header("Content-Type: text/html");
echo '<img src="'.$thumbname.'" />';
 
$thumbImg->clear();

設定メモ

configure: error: no acceptable C compiler found in $PATH
# yum install gcc make
  • 再度叩く
# pecl install imagick
...(中略)...
install ok: channel://pecl.php.net/imagick-3.3.0
configuration option "php_ini" is not set to php.ini location
You should add "extension=imagick.so" to php.ini
# service httpd restart
# php -i | grep imagick

参考リンク

20160227追記 利用③ タグで頑張る (Imagikでthumbnailを作るとコストがかかる)

  • thumbnail用の画像は利用せず、素の画像をタグのwidth/heightで対応

    • width/heightの指定が片側だけの場合、比率を保持出来る
      • どうやって画像サイズを取得するかの問題が残る

  • 画像サイズの取得の方法

    • CSSに頼る -> max-widht/max-heightを指定すればうまいこと判定してくれる
    • PHPなどサーバサイドでタグを吐いている場合は、タグにwidht/height属性をつけるかつけないか判定
      • URLを参照する画像の場合、結局Imagikで読み込んで画像サイズを取得するのでは、コストがかかるた

  • CSSに頼る

    • max-width / max-heightを指定しておけば、長辺が指定した値を超えた場合超えた方の値を利用する
img {
    max-width: 100px;
    max-height: 100px;
}
  • PHP側で実装
    • 上にも書いたがImagikを使って画像サイズを取得するのはコストがかかる気がする
      • 実際にthumbnailImageを使った場合と、thumbnailImageを使わないでsizeだけ取得する場合のコスト比較は次回