自动将宽度和高度属性添加到< img>带有PHP功能的标签

问题描述

我想要的是一个函数，我可以在用户输入上运行智能地查找并添加宽度和高度属性添加到HTML中的任何< img> 标记中，以避免图片加载时出现页面回流问题。

我正在写一个PHP论坛的发布脚本，在这个论坛中，用户的输入已经过清理，并且在写入数据库以供日后显示之前，通常会变得更好。作为我做更好的事情的一个例子，我有一个将 alt 属性插入图像的脚本，如下所示：

以下是两张图片：< img src =http://example.com/image.png> < img src =http://example.com/image2.png>

其中，通过发布脚本进行消毒，变成

以下是两张图片：< img src =http://example.com/image.pngalt =已发布图像> < img src =http://example.com/image2.pngalt =发布图片>

使得它在HTML 4下严格验证，但也许不符合alt属性的精神 - 唉！）

所以，对于我的函数，我有一个模糊的想法服务器将需要在HTML块中找到的每个外部图像上运行 getimagesize（），然后将函数生成的属性应用于每个< img> 标签。我认为这个函数之前已经写过，但是我没有在Google或php.net文档上运气。我必须从头开始，还是有人意识到我可以使用或适应这项工作的（相对）强大的功能？ 解决方案 div>

你是对的 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（）; 
？> 
  

What I want is a function I can run on user input that will intelligently find and add the width and height attributes to any <img> tag in a blob of HTML so as to avoid page-reflowing issues while images load.

I am writing the posting script for a PHP forum, where a user's input is sanitised and generally made nicer before writing it to the database for later display. As an example of what I do to make things nicer, I have a script that inserts alt attributes into images like so:

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

which, upon sanitising by the posting script, becomes

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

(This makes it validate under HTML 4 strict, but maybe isn't in the spirit of the alt attribute—alas!)

So, for my function, I have a vague idea that the server will need to run getimagesize() on each external image it finds in the block of HTML, then apply the attributes that function generates to each and every <img> tag it runs into. I assume that this function has been written before, but I have had no luck on Google or php.net docs. Do I have to start from scratch, or is somebody aware of a (relatively) robust function that I can use or adapt to do this job?

解决方案

You're right about getimagesize(). You can simply do something like this:

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

If the image is hosted at a remote location, you'll have to download all the images though (the function takes care of it), so you might want to cache the result to speed things up on subsequent requests.

Edit: Just saw that you have a string containing various <img> elements. This should do the trick:

<?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();
?>

这篇关于自动将宽度和高度属性添加到< img>带有PHP功能的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！