使用 php 渲染图像并使用 html ![]()
输出它标签
我有一个包含多个可以渲染图像的函数的类。
// render.php
class Render {
public function Render($some_arguments) {
...
header("Content-Type: image/png");
$im = @imagecreate(110, 20)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, "A Simple Text String", $text_color);
imagepng($im);
return "data:image/png;base64,".base64_encode($im);
}
}
然后我有我的 php 文件，其中包含 html 代码以及我想在 < 中输出图像的位置。 img> 标签：
// index.php
include("render.php");
$render = new Render();
echo "<htlm><head></head><body>";
echo "<img src=\"".$render->Render(1)."\" />";
echo "</body></html>";
当我在浏览器中运行index.php 时，我只是看到一个空白屏幕。
我不能使用函数调用作为图像源吗？我知道我可以使用 php 文件作为源，例如 < img src="render_image.php" />，但是我无法以面向对象的方式发送任何参数（我知道我可以使用 $_GET 来检索参数），但我想用漂亮的面向对象编写代码。
那么，有什么方法可以使用函数调用作为 html 标签的来源吗？
I have a class with several functions that can render images.
// render.php
class Render {
public function Render($some_arguments) {
...
header("Content-Type: image/png");
$im = @imagecreate(110, 20)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, "A Simple Text String", $text_color);
imagepng($im);
return "data:image/png;base64,".base64_encode($im);
}
}
Then I have my php file that contains the html code and where I would like to output the image within an < img> tag:
// index.php
include("render.php");
$render = new Render();
echo "<htlm><head></head><body>";
echo "<img src=\"".$render->Render(1)."\" />";
echo "</body></html>";
When I run index.php in my browser I just get a blank screen.
Can´t I use a function call as an image source? I know I can use a php file as source, like < img src="render_image.php" />, but then I cannot send any arguments in an object oriented manner (I know I can use $_GET to retrieve arguments), but I would like to do it with a nice object oriented written code.
So, is there any way to use a function call as a source of a html tag?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以对图像进行 BASE64 编码并使用数据 url 方案：
例如。
因此，如果您包含它而不是原始图像，您就可以完全按照您的意愿进行操作。
（示例来自维基百科）
You can BASE64 encode the image and use the data url scheme:
eg.
So, if you include that instead of the raw image you can do exactly what you want.
(Examples from Wikipediea)
您必须将其拆分：
Render(...)将写入一个临时文件（具有随机名称），可以在一段时间内从网络访问该文件。新方法
Output()将返回上面提到的随机名称。然后，您可以在输出 HTML 之前调用
Render()，并使用Output()嵌入 URL。作为替代方案，您可以使用某些文件或数据库来交换参数，本质上是某种方法
Prepare(...)?将参数写入文件或数据库，然后Render()读取这些参数并再次放置文件等。作为另一种替代方案（不写入文件系统）：您可以使用以下命令实现包含图像数据一个
data:uri，但是图像大小将受到所使用的浏览器的限制，并且您不能以这种方式缓存数据（即您必须始终发送它）。根据您想要实现的目标，您也可能会幸运地嵌入 SVG 图像。这将提供就地使用的巨大优势，同时仍然使用更少的带宽、可扩展等。缺点是，这仅在最新的浏览器中受支持（类似于
data:），但没有大小限制。编辑：使用base64/嵌入式方法会有点棘手，导致类似这样的结果（未经测试，但应该可以工作）：
You'll have to split it:
Render(...)will write a temporary file (with a randomized name), that is accessible from the web for some time.A new method
Output()will return the randomized name mentioned above.You then call
Render()before outputting the HTML and embed the URL usingOutput().As an alternative, you could use some file or database to exchange the parameters, essentially some method
Prepare(...)? writing the params to the file or database, andRender()reading those and placing the file again etc.As yet another alternative (without writing to the file system): You could implement include the image data using a
data:uri, but the image size will be limited depending on the browser used and you can't cache the data this way (i.e. you have to send it all the time).Depending on what you're trying to achieve, you might have luck embedding a SVG image as well. This would offer the huge advantage of being in-place while still using less bandwith, being scalable, etc. Downside is, this is only supported in newest browsers (similar to
data:) but there are no size restrictions.Edit: Using the base64/embedded approach it get's a bit more tricky resulting in something like this (untested, but should work):
不久前我也遇到了几乎同样的问题。您可以在这里找到解决方案和一些可能的问题：内联生成的图像超过长度
我认为您正在寻找的基本是
I had pretty much the same problem a while ago. You can find a solution and some possible problems of it here: Inline generated images exceeding length
The basic I think you are looking for is
<img src="data:image/png;base64,[data in base64]"/>黑屏最可能的原因与提交的两组标题数据有关。因此，首先您运行此语句：
它将自动设置发送到浏览器的数据的内容类型。
接下来，您将运行此行：
然后，这将导致运行此行：
然后，这将尝试设置与第一个 echo 语句已发送的标头不同的标头。
我建议更改 Render() 函数以接受文件名，然后将图像写入该文件并返回指向写入的图像文件的路径。这样，您就不会尝试将同一流中的图像文件和 html 文件输出到浏览器。
问候，
拉尔夫
The most probable cause for the blank screen has to do with two sets of header data being submitted. So, firstly you are running this statement:
Which will automatically set the content type of the data being sent to the browser.
Next, you are running this line:
Which then causes this line to be run:
This then attempts to set a different header to that which has already been sent by the first echo statement.
I recommend chaning the Render() function to rather accept a filename, then write the image to that file and return the path pointing to the image file which was written. That way, you are not trying to output an image file and a html file in the same stream to the browser.
Regards,
Ralfe