网页的信息图形可视化：有没有更好的方法来代替小的 PNG 文件？
Information graphical visualization for web-page: Is there any better way instead of small PNG files?
先描述一下任务：
我想创建一个网页，其中包含多行文本和每行一个小（假设为 100 x 20 像素）图形。每个图形都是动态生成的（因此每次加载页面时都会是一个新图形）。
我自己能想到的唯一方法是在每次指示行时在服务器上创建一个新的 PNG 文件，并将 link 添加到这个新创建的文件到 HTML：<img src='row1graph.png'>.
如果页面是单个图像 - 我可以将它直接输出到浏览器，但我的情况不是这样。
那么问题来了：有没有更好的方法来处理这样的图片，跳过不必要的磁盘访问操作？
有两种方法可以优化网页中的小图形。您可以使用 tile-set 概念（单个图像中的所有图形，具有基于例如背景位置的偏移），或者您可以将 PNG 作为 base-64 直接嵌入到页面中：
<img alt="Embedded Image" src="data:image/png;base64,yourbase64image" />
根据文件大小和浏览器支持，这些选项有不同的优点。当然，两者可以组合 - 您可以拥有一个嵌入式拼贴集。
好吧，如果您想避免 "unnecessary disk access"，并且由于图像尺寸较小，您可以使用 Base64 encoding。您也可以将编码后的字符串存储在数据库中。
这样 <img src='row1graph.png'> 就变成了...
<img src="data:image/jpg;base64,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"/>
您可以从 PHP 而不是从文件提供图像 - 我的意思是您可以 PHP 动态创建图像并提供它，而不必在网络服务器的文件系统中有一个文件并且必须在 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 数据流发送到浏览器。
上面的代码在浏览器中产生了这个：
先描述一下任务：
我想创建一个网页，其中包含多行文本和每行一个小（假设为 100 x 20 像素）图形。每个图形都是动态生成的（因此每次加载页面时都会是一个新图形）。
我自己能想到的唯一方法是在每次指示行时在服务器上创建一个新的 PNG 文件，并将 link 添加到这个新创建的文件到 HTML：<img src='row1graph.png'>.
如果页面是单个图像 - 我可以将它直接输出到浏览器，但我的情况不是这样。
那么问题来了：有没有更好的方法来处理这样的图片，跳过不必要的磁盘访问操作？
有两种方法可以优化网页中的小图形。您可以使用 tile-set 概念（单个图像中的所有图形，具有基于例如背景位置的偏移），或者您可以将 PNG 作为 base-64 直接嵌入到页面中：
<img alt="Embedded Image" src="data:image/png;base64,yourbase64image" />
根据文件大小和浏览器支持，这些选项有不同的优点。当然，两者可以组合 - 您可以拥有一个嵌入式拼贴集。
好吧，如果您想避免 "unnecessary disk access"，并且由于图像尺寸较小，您可以使用 Base64 encoding。您也可以将编码后的字符串存储在数据库中。
这样 <img src='row1graph.png'> 就变成了...
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gMTAwCv/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIABQAZAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APzs8TfBbx+tviP4uaP4LSCaGe71Jb3TtTRbSJ0mnUrqUlzEYWiR1lc/Oi7jkYzXvc/jP4EaPpEup6z4z+F0NhpmoPoeqa7qV/4Z0vTZtb0+2tpNQslur+aG1nu4VureS5htZJDBLKYXCypJGn5ueN/jP4d0nwf4qu9D8a+D/EmvQaFfR6H4ai8TWVxda9rM8MkOnaUsFtfvcXC3l3LBBNHBGW8h5cMMAH89PDz+M9cvjpvjjw34QisYr6TV9H8H+J9RuPh5ZBdYmn1PUNJsdTOqeHtJ1gW+rz3TPYaz4m0h9bgmtE0DWLeW41vQrnxcw4MpYmVOhPP8wxWJtKdKlXlhpVHTUX7RUo0KNOUnUnGEU7yUWknC0019PgOMp4ONSrSyTA4bDy5YVKtL2/s1V5o+zdWdWpOEFThKpKSSi5R2kuWz/fiL9pD9ji11CNYviv8ACa01KCRGguE1Xw/GkUuPkeO92pBHjdlZFnC4YfNzXsB8TeDfGttpE/hLxloevRmYvFNoN9o2txyxsgYlRY3k33gQVxjHU1+WHgn9onx18PNMh0gfBL9lrwVa2lvGsMvxN0Lw4lvawMo8qR4dV+PNpPbAg5WRobwAnP2eb7ho6r8f/EHjvW/Dskus6Deano2pQy6d4e+A/hDU9e0m1sJ7yGbVbLw1qXhvw78MPhXp6am1vameT4gaj44u47mGC6svEWnGzt7g/IVuDsBVp1YYrE4jDuk7RnJUseo1ITh7tSny4b2cUr80nWfI1Zp6s+ohxdjYypSoYXDYlVLOUEqmBvCUF71Oo54l1ZJtKMVSTldWa1v+6/8AwTs0Sz/4fR/saW+q7L2KX4PftKzD7VELZRPb/D+9ntMiMtkx3FvHIrMSNygNlBX27/wXf/a9+Ov7M/7XXw98BfB/48eJfgn8OPEH7LOg+KL7SPBXhfwVqw1j4hTfHPXtBuJzc+IPA3i+70271LwzYWmjG+jit7G0WGyeVJg0ttc/nj/wSag17Tf+Cy37CKatpN9oGleKfgd+1Jr/AIW0HVfHGo/EPVdI0KX4V3r2drceJdQhZnk89L6SfTLLUdf0vSJW+w6brd3aQxiL6I/4OW9c8JaR+3J+zxc+Pby3tNAuf2YNHstb+zXd7Hri6Q3xp8eXEz6La2Vrd3F1e3H2UxwNcfYLWFkmuo9Ts7u0gmX73JMH7PLMHhot+5haK504RkkqkHo4urCLjeScoOrFauHOmub4zMMXTln2KxVWnSnTlVxEvY4iNSdCVSWFqRhzwcsNOUHP2ckpewk2oqbpON4/k7+1f/wVR/bS+FOm+Fbr4U/t5eMdVu9R+2w6jo/jXwd8G9LuzbpNbLZ6vb3/AIn+GfhKGW2eK7s7VrWysb2WRYZr6RbK3sr0QT/sofGDV/8Agrp4w+HHwD/ab13Q/FX7RF3rsZ1DxNY33w8Wf4k/Dzw5/adxaeIYbfwldWtlo/jX4f6X9vjktxptpB4k8MWtm1uZbhwJvzl/bD+Ong6Z7Gw+EEN/ceHW0yKK8e8jMWpTXUPyG01Ox13QdUgutOkBjJht9Smjvkju4da+2QzwRx43/BOz48L8LP2+vgf8Y47XR/DmkfD3XPBn9pNovhvw/wCF4ofDGqeJPC3h/wAXrcR+H9M0xb1W8O6tq6q99FJOkLmJDEh8tbr5I8xwdPD4p1oyw1aOMoV41ovFRrUm5wvONKNPW8qM04yU6cpJNu0362U8UV+F82xeLweGy72GY4avlOPwNWg6uBrZfmLh7anGDqe2jHD1adLE4X9/7WlOjRjVnUtNS/Qf9oD/AIIt/tZfsQ+OvG3iHR/CeofFP4TXw1fTtF8YeC7aa/1TRJLlRLp+t3+hW/nX8W2CNoZ50hlgtbiV3EnlgNX4ofEr9lv4tat4S174iDTNX1HSdP1u6025nS1mPl3cBHnrcPsCRyBiC6S7ZCw+YEqa/wBgLSodM8WaTZajGba+sb+yiuIJR5dxb3FvPCHjkXIaOSKRGDqwyGRgQSDX4p/tj/BT4QeAfDPxS0nTfBGj6c/jnWZPEGq2kVnbJp9/qU1sIbi/ht/L8uC4mCA3HlInmSkyMDJIzH5zN8xxGWYdVIzUoQqL43rKOl4O28mkkpKz6O92z6DIsnwGe4ypg6sJ0ZOjJxVL3oRqNxXPFSd4wjrJw5ppt2XKrI/y9vDnwY8ceJ5NVj03Rby5On28s12hBz8uT5YHV5Nw+VQM5z0r6S/ZZ/Zz0rX7fxN418ZQ/aU8H6d4jvZtHuHMCRS6Jpt1estxLn93IptiqlhhHcHBAIP9BviD4N+EdP1DWZdE0TT9Nmld9klrbrF5mGb93IVUA7egLdPevlCX9lH4s+M/CHxm8O/s/wDhK78S+MPiFod/otloOnXWm6axvL947XXrz7Zq15p+n26x6HLqF3ma7iaRo/LiEkjhDwZVxBUznHUsvjTlGFarhU40pS9tOl7WnGvTjKHvKU4SlyuHvJ7aq5pnXCdDhrBVc2qVqdX6nQxlVzrxj9XpVKdGVTD1qkZ3i4QnCLnGpzQd7vS5o/s3f8FSPEl98Dvh54S8S6HBo/8Awq3S7/wDoCeFraKwtLrwyNe1fxlpMt9AiKj6nZDxjPok15t87UbbSbTUL15b+6uppCui+E3/AAS0/bD8DeCbC2uv2c4LzV9cu9U1/WbBfFfgSO38O3EmoXGk6ZoNo114uZ54Lfw3pGh3rzJNcqbm/uI3uJLiObBX7nhqePo4ehSi+SNOnCEYewqe7CKgoJ2jpaKjdbq0k9UfgFbM8mxNariK2OwtStXqTq1ZyxlHmnVqS56kn+9V3Kbbbsk73Sszk/DPwb+E0bJqtj8N/BWk6hapaz213pXhzS7K4gkuIZPMaKeK286PgFQVkB2swJYE1ua5oGkvC1pLY29xasozBcQwzRYIUlSjxlSvswPSiiv5udSpUqOVSc5tXs5ylJqz0s5NtW6WP6AhTp06aVOEIJ8t1CMYp3gr3UUk79b7nkWtfDHwXrn2G1udHjtDYzKum3Okyy6Rd6Y075lexm05rfyt7O7SRsskE2+QTxSrJIrfPXjv40+MPhl8U7/4a2Vr4X8RaVoHjvw7oNjrHiDw1plr4hk0q+HiSB7e/uvCEXhTT9QliXR7F4r670yXUGljke4up/PmDlFfV5P/ALVSrxxP+0Rp0moRr/vlBLD1pJQVTmUUpRjJJWtJJrVI+Zzf/Zq+HeH/ANndSpF1HR/dObdahFubp8rk3FuLcr3Ta2P6D/8AgkV4i8R6r/wVy/4Jk22ta7f6zbab+zd+1dZaNb362ezRdJi+GPiO8g0fT2tbS1lGn29zeXc0Ru5Lu9LXMokvJF2BPQf+DroK/wC2Z+z5KUUN/wAMnaPgDJChfi58V8AFizY65yxJJJJyaKK+8wGsqDereEopt6tpQoJJ36JaLstD4jENuVS7v+8qP5+2nr+LP5KPHdxLPpsTsxVp4LAMUJVlW5igmlEbElkyXMakHcseADu+asH9nAmf4pzwytJJHLDpkUokllkMiS+L/C6yBzLI5bcCQSSTiiivUhv93/pSMsc24q7b+Dd36M/uf+En7f8A+0d8K/8AgkN+zX418Ka/ow8ZXNzL8NG8UatpMur6snh/wzbfYtKnVry/e0l1aO0tobea9urW4SVE3m3ExaU/hj+2f+2H+1b4z0uDxnr37QPxEnv5ZbZG06CfQbTRAssyK4XT7fQkIGGOB5+OmQcUUV46weExGGxXt8Lh63LiKij7ahSqcqVRWS54ysl0se7Wx2NwtbDSwuMxWGlPCUnKVDEVqLk3TjdydOcXJvq3e5+fkfjz4m/FHWrDS/FfxQ8cyWNwLdriDS9RsdIM33XYPNYaZDOPMJw5WVWI4DDrWRof7QHxi/Z/+K2oWXwl8f8AiTwm4RYzfQ6re39463ERScyf2pPe2srSozK5ktW+ViBjNFFXhsNhsPClPD4ehQnTqR5JUaVOlKFo3XJKEYuNnqrNWep5+MxeKxcqsMVicRiYVYzjVhiK1StGrGSSlGpGpKSnGS0kpJprRo/pM/ZQ/bX+PfjT4M6HrXi3XdF8Qaybu7tJdUvvD9hHd3EVtHbCMz/YRaQPJlnZ5BCrOzEk4wAUUV9/QnOVGk5Sk24Rbbk222tW23dt92fkmKweEjia8Y4XDRjGrNJRoUkklJ2SSjZJWVktrLsf/9k="/>
您可以从 PHP 而不是从文件提供图像 - 我的意思是您可以 PHP 动态创建图像并提供它，而不必在网络服务器的文件系统中有一个文件并且必须在 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 数据流发送到浏览器。
上面的代码在浏览器中产生了这个：