PHP関数を使用して<img>タグにwidth属性とheight属性を自動追加する

Question

私が欲しいのは、ユーザー入力で実行できる、インテリジェントに検索して追加する関数です。 width そして height どれかの属性 <img> タグを HTML の blob 内に追加して、画像の読み込み中のページのリフローの問題を回避します。

私は PHP フォーラム用の投稿スクリプトを作成しています。このフォーラムでは、ユーザーの入力は通常、後で表示するためにデータベースに書き込まれる前にサニタイズされ、より見やすくされます。状況を改善するために私が行っていることの例として、次のスクリプトを挿入します。 alt 次のように画像に属性を追加します。

Here are two images: <img src="http://example.com/image.png"> <img src="http://example.com/image2.png">

これは、投稿スクリプトによってサニタイズされると、次のようになります。

Here are two images: <img src="http://example.com/image.png" alt="Posted image"> <img src="http://example.com/image2.png" alt="Posted image">

(これにより、HTML 4 の下で厳密に検証されますが、おそらく alt 属性の精神に沿っていない可能性があります。残念ながら!)

したがって、私の機能では、サーバーを実行する必要があるという漠然とした考えがあります getimagesize() HTML ブロック内で見つかった各外部画像に対して、関数が生成した属性をそれぞれの画像に適用します。 <img> 遭遇するタグ。この関数は以前に書かれていると思いますが、Google や php.net のドキュメントではうまくいきませんでした。ゼロから始める必要がありますか? それとも、この仕事を行うために使用または適応できる (比較的) 堅牢な関数を誰かが知っていますか?

Answer 1

あなたは正しいです getimagesize(). 。あなたは単にこのようなことをすることができます：

$img = 'image2.png';
$info = getimagesize($img);
printf('<img src="%s" %s>', $img, $info[3]);

画像がリモートロケーションでホストされている場合、すべての画像をダウンロードする必要があります（関数はそれを処理します）ので、結果をキャッシュして後続のリクエストで物事を高速化することをお勧めします。

編集： さまざまな文字列があることがわかりました <img> 要素。これはトリックを行う必要があります：

<?php
$html = <<<EOF
something <img src="https://www.google.com/images/logos/ssl_logo_lg.gif"> hello <img src="https://mail.google.com/mail/images/2/5/logo1.png">
EOF;

$dom = new DOMDocument();
$dom->loadHTML($html);

foreach ($dom->getElementsByTagName('img') as $img) {
    list($width, $height) = getimagesize($img->getAttribute('src'));
    $img->setAttribute('width', $width);
    $img->setAttribute('height', $height);
}

$xpath = new DOMXpath($dom);
$newDom = new DOMDocument();
foreach ($xpath->query('//body/p')->item(0)->childNodes as $node) {
    $newDom->appendChild($newDom->importNode($node, true));
}

$newHtml = $newDom->saveHTML();
?>

Answer 2

問題は、サーバーが事前に非常に多くの作業を実行する必要があることです。サイズのデータ​​ベースをオフラインで作成する (またはサイズのキャッシュを維持する) 方がはるかに効率的であると思います。

これを完了すると、画像サイズを設定し、HTML の最後でインラインで呼び出されるキャッシュ可能な JavaScript を使用して、作業をブラウザにプッシュできます (これには、すべての HTML をプッシュする必要がないという利点があります)書き換え用の PHP コードを介して)。ヒント：document.images[] を反復処理します。

HTH

C.

Answer 3

getimagesize() を使用することもできますが、この情報を一度保存​​して再利用するか、少なくとも積極的にキャッシュする方が賢明です（頻繁に変更される可能性は低いため）。そうしないと、サーバーが負荷が高くなってクロールして停止します。