Ok people, despite the best-known-practices, today I decided to do this:
<img src='<? include("dir/dir/img.png"); ?>'>
With 6 diferent .png images.
Sadly, only 2 of the 6 were nicely visible on the browser.
Why only 2 of the 6 images were shown? Maybe there were data losses bits on the way?
Thank you for your time :]
It does not work because src attribute of an <img> tag is not supposed to contain the raw data of an image; rather, it is supposed to contain a URI that points to the image data.
By using data: URIs, you can embed the image directly in your (X)HTML document. Note that this will not work in many browsers such as older versions of Internet Explorer. As well, there are limits, such as the 32KB limit IE8 places on data: URIs.
Using PHP, here's what your code would look like:
<img src='data:image/png;base64,<?php echo base64_encode(file_get_contents("dir/dir/img.png")); ?>'>
Don't forget to change the image/png part of the URL if the type of image that you are using changes. For example, if you use a GIF image, change it to image/gif.
That was not supposed to work at all.
For a standard way to do that (including images inline in the HTML document instead of pointing to their URL), see the data URI scheme.
include() tells PHP to parse that file. If, by any chance, it contains <?, you’ll be in real trouble. Instead, use readfile().
Additionally, Artefacto’s answer has to be considered as well.
< img src='< ?php echo 'data:image/png;base64,' . base64_encode(file_get_contents('dir/dir/img.png')) ; ?> ' >
Related
I'm using PHP. I would like to use file_get_contents to get an .svg file, and convert it for use as a data uri in an image tag. Something along these lines:
Controller:
$mylogo = file_get_contents(FCPATH.'app/views/emails/images/mylogo.svg');
View:
<img src="data:image/svg+xml;utf8,<?= $mylogo ?>">
I need to convert it into something (base64?) as right now it is just dumping it in tags and all and though the image does appear, it makes a mess of the img tag surrounding it.
<svg> elements can be echoed directly onto a web page like any other element; there's no need to include it as an img src attribute. PHP's include can be used for this (ie. include('/path/to/image.svg')), amongst a myriad of other methods.
Alternatively, if for some reason you need to include the svg as an actual img tag, there's no need for file_get_contents or similar functions; an SVG can be linked as a source path like any other image type (ie. <image src="/path/to/image.svg">).
Solution
Controller
$encodedSVG = \rawurlencode(\str_replace(["\r", "\n"], ' ', \file_get_contents($path)));
View
<img src="data:image/svg+xml;utf8,<?= $encodedSVG ?>">
⚠️ Do not convert to base64
It's less efficient in CPU time and also makes longer requests in size!
Know more about why
I've been trying to display a gif image using PHP and have not found a solution to my problem with the research I've done. I know I can display image in HTML/CSS, but I need to use php in this case.
<html>
<?php
$img = imagecreatefromgif("http://www.mysite.com/images/timer.gif");
?>
<img src="<?= $img ?>" alt="timer" />
</html>
That code resides in a php doc on my server. I can tell the code is working because an icon of a torn image displays on my site, and when I attempt to save the torn icon image to desktop, the automatic file name appears as "Resource id.html"?
I read somewhere that creating gifs with Photoshop CS5 (as I did) uses a different frame separator sequence, \x00\x21, instead of the official standard \x00\x2C. The guy then said he uses pattern "#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s" to bypass that issue but I have no idea how/where to implement that or if that is even my issue (tried a different gif from internet and had same display problem). Thoughts? Thank you.
Imagecreatefromgif() returns an image resource, which you can't use in this way.
Have your PHP script output the image data, with the correct headers (see example here http://php.net/manual/en/function.imagecreatefromgif.php).
Then you can call your script just like you would any other image:
<img src="http://www.mysite.com/images/generate_image.php" alt="timer" />
I'm having trouble figuring out if it's possible to embed an html or js document as an image, like so:
<img src="http://blah.com/image.js" />
or
<img src="http://blah.com/image.html" />
The general idea being that when the browser tries to access the file, it would execute the file clientside and get the actual image, and would then embed it as usual. I realize this can be done easily with PHP, but I'm looking for a non-server solution.
Problems being the content type it transfers as is wrong, and more importantly I think this violates every crossdomain and sandbox rule, to which I don't think there's any way around.
As long as the document you are linking to can display the binary data this will work.
Follow this article to solve the binary load with javascript, http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html
Then you can also include base64 data in img tags like this
<img src="data:image/png;base64,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" />
The src attribute must point to a URI that eventually results in actual image data. Perhaps you should consider leaving it blank and then creating a script that generates a data: URI and replaces it into the attribute.
I am using this script which is one of the examples provided by jpgraph itself. When I put this on a web-page (blank) by itself, it's drawing the graph. But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
GD is already enabled according to phpinfo(). Iam using jpgraph 3.5.0b1.
The problem is that you are mixing HTML/text output with image output.
Any time you have a PHP script generate graphical content you have to handle the output differently than normal HTML or text.
There are a few routes, I'll cover them briefly here.
Save the output to a file and use that filename in your HTML
//replace this line:
// Display the graph
//$graph->Stroke();
// with these lines:
// Default is PNG so use ".png" as suffix
$fileName = "/tmp/imagefile.png";
$graph->img->Stream($fileName);
.. then use $filename in an image tag, like this (for example):
print '<img src="'.$filename.'" />';
Create a standalone PHP script that will output the graphic
You can use the example script as-is, alone in a file called graph_render_script.php. Then, in your HTML, you use that script as a source:
<img src="graph_render_script.php" />
Output base-64 encoded data
Another route is to use base-64 encoded image data. This is relatively simple to do:
print '<img src="data:image/png;base64,'.base64_encode($graph->Stroke()).'" />';
As always, the documentation should be your guide!
Documentation
http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html
base64_encode - http://php.net/manual/en/function.base64-encode.php
This worked for me:
putting the php code that generates the image in a file...Then on my html page I do this:
<img src="graph.php" >
embedding the graph inline is indeed possible. You'll have to use output buffering to capture the image data, then base64 encode that data, then use that base64-encoded string as the source in an <img>.
Try something like this:
$img = $graph->Stroke(_IMG_HANDLER);
ob_start();
imagepng($img);
$imageData = ob_get_contents();
ob_end_clean();
?><html>
<head>
<title>JpGraph Inline Image Example</title>
</head>
<body>
<h1>JpGraph Inline Image Example</h1>
<img src="data:image/png;base64,<?php echo(base64_encode($imageData)); ?>" />
</body>
</html>
ceejayoz made an excellent point in that this method is almost never what you want. I do not recommend embedding the image data like this unless you have a good reason to do so and understand the downsides, i.e. older browsers lack support for it, and the page size is dramatically increased (not only from the image data but the fact the image data is base64 encoded, which balloons the length). I've used this method in the field myself on a project last year, but it was only because the client refused to make a second request for the image.
But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.
You can't do that - you can't output an image as raw binary data within a page.
You need to put the code that generates the graph in a separate file, and use an image tag.
<img src="path/to/jpgraph/chart.php" />
The graph needs to be on its own page, you can't embed it. It outputs a raw JPG and you need to have no other content sent and have the proper headers to tell the browser it's a JPG. To embed the graph you'd make a different page called stats.php for example, and on that page you'd make an image tag pointing to the stand alone graph.
<img src=graph.php>
I've had this problem many times, I've noticed it happens when you have require() or include() in your Chart's script and those scripts have Data Base connections or special configurations.
I've solved this problem separating the data retrieving and the Chart drawing, passing parameters to the script or using SESSIONS to get the values.
Example of Embed image Chart in your PHP or HTML file:
<img src="linear_graph_customer.php?values=1,2,3,4|1,2,3,4|1,2,3,4&title=CHART&width=500&height=300" width="500" height="300" class="img" />
Regards.
I know that I can output an image using GD by using
<img src='draw.php'>
Where draw.php is a file containing the code to create an image. How can I instead output the image via a function call (I am using the Zend Framework so will be using a View Helper) rather than simply pointing to a .php file in an img tag as above?
Any help greatly appreciated.
you can't.
at least not in a useable way - you could encode the image with base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt=""/>
i don't have any idea which browsers support this, though ... quick test:
firefox: ok
chrome: ok
opera: ok
ie6: fail
ie7: fail
safari: fail
ok, forget it.
but, you're probably trying to do something different - passing the file through ZF. i can't help you with that, but it should work roughly like this:
in your controller, set the output type to image/png (however ZF handles that) pass through your image and make sure ZF doesn't add anything to the output (like additional html and stuff).
Why not make your View Helper create an image, write it to disk, and then output/return the img tag with the correct source attribute?
Send appropriate headers (content type) and then use http://www.php.net/image_jpeg