网页信息图形可视化：除了小PNG文件之外，还有更好的方法吗？

我们先描述一下任务：

我想创建一个网页，其中包含几行文本和每行一个小（假设为 100 x 20 像素）图形。每个图形都是动态生成的（因此每次加载页面时都会生成一个新图形）。

我能想到的唯一方法是每次指示该行时在服务器上创建一个新的 PNG 文件，并将指向此新创建的文件的链接包含到 HTML：<img src='row1graph.png'>.

如果页面是单个图像 - 我可以将其直接输出到浏览器，但这不是我的情况。

那么问题是：有没有更好的方法来处理此类图像并跳过不必要的磁盘访问操作？

您可以从 PHP 而不是从文件提供图像 - 我的意思是您可以让 PHP 动态创建图像并提供它，而不必在 Web 服务器的文件系统中拥有一个文件，并且必须在 src 字段中按名称引用它HTML 中的一个标签。

所以，而不是

<image src="xyz.png" alt="..." size="...">

您可以使用

<img src="/php/thumb.php?param1=128&param2=45"/>

这会导致 PHP 脚本位于/php/thumb.php渲染页面时调用。在该脚本中，您可以动态创建图像（如果您愿意，可以使用额外的参数），如下所示：

<?php    
header("Content-type: image/png");
$p1 = $_GET['param1'];
$p2 = $_GET['param2'];

// Create a 200x200 image
$im    = imagecreatetruecolor(200,200);
$white = imagecolorallocate($im, 255, 255, 255);
$red   = imagecolorallocate($im, 255, 0, 0);

// Here you can draw in the image, write on it, set any pixels, calculate any colours you wish

// Draw a white rectangle, then a red one
imagefilledrectangle($im, 50, 50, 100, 100, $white);
imagefilledrectangle($im, 75, 75, 150, 150, $red);

imagepng($im);
imagedestroy($im);
?>

我在前 3 行之后省略了一些代码，因此您只能看到技术，而不是我的代码的所有血淋淋的细节。您感兴趣的实际行是：

header(...image/png);

它告诉浏览器即将出现什么类型的内容 - 即图像，以及

imagepng();

它实际上将 PNG 数据流发送到浏览器。

上面的代码在浏览器中生成：