使用 PHP 函数自动为 <img> 标签添加宽度和高度属性

Question

我想要的是一个可以在用户输入上运行的函数，它可以智能地找到 width 和 height 属性并将其添加到 HTML blob 中的任何 <img> 标记，以避免页面重排问题，同时图像加载。

我正在为一个 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 属性的精神——唉！）

因此，对于我的函数，我有一个模糊的想法，即服务器需要在它在 HTML 块中找到的每个外部图像上运行 getimagesize()，然后将函数生成的属性应用于每个 <img>标记它遇到。我假设这个函数之前已经写过，但我在谷歌或 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

问题是您需要服务器预先完成大量工作。我怀疑离线填充大小数据库（或维护大小缓存）会更有效。

完成此操作后，您可以使用可缓存的 javascript 将工作推送到浏览器，该 javascript 设置图像大小并在 html 末尾被内联调用（其优点是您不需要推送所有的 html 都通过你的 PHP 代码进行重写）。提示：遍历 document.images[]

HTH

C.

Answer 3

您可以使用 getimagesize()，但最好将此信息存储一次并重复使用，或者至少积极缓存（因为它不太可能经常更改），否则您的服务器将在更高的负载下爬行停止