让我们先描述一下任务:
我想创建一个网页,其中包含几行文本和一个小的(比方说100 x 20像素)图形。每个图形都是动态生成的(因此每次加载页面时它都是新图形。)
我能想象的唯一方法就是每次指示行时在服务器上创建一个新的PNG文件,并包含指向HTML的新创建文件的链接:<img src='row1graph.png'>
。
如果页面是单个图像 - 我可以直接将其输出到浏览器,但这不是我的情况。
所以问题是:有没有更好的方法来处理这些图像并跳过不必要的磁盘访问操作?
答案 0 :(得分:2)
你可以从PHP而不是从文件提供图像 - 我的意思是你可以让PHP动态创建一个图像并提供它,而不是必须在你的web服务器的文件系统中有一个文件,并且必须在名称中引用它。 HTML中标记的src字段。
所以,而不是
<image src="xyz.png" alt="..." size="...">
你可以使用
<img src="/php/thumb.php?param1=128¶m2=45"/>
导致在呈现页面时调用/php/thumb.php
处的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数据流发送到浏览器。
上面的代码在浏览器中生成:
答案 1 :(得分:1)
有两种方法可以优化网页中的小图形。您可以使用图块集概念(单个图像中的所有图形,基于例如背景位置的偏移),或者您可以将PNG直接嵌入到页面中作为base-64:
<img alt="Embedded Image" src="data:image/png;base64,yourbase64image" />
根据文件大小和浏览器支持,这些选项具有不同的优点。当然,两者都可以组合在一起 - 您可以使用嵌入式磁贴集。
答案 2 :(得分:1)
好吧,如果你想避免&#34;不必要的磁盘访问&#34;由于图像尺寸很小,您可以使用Base64 encoding。您也可以将编码的字符串存储在数据库中。
这种方式<img src='row1graph.png'>
变成......
<img src="data:image/jpg;base64,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"/>
&#13;