Is it possible to create a temp file server side for viewing an image?
I've some images & they're displayed from server but I want to have them watermarked... Found out about the Imagick Class, used composite... It can be viewed when sent as header but I need it somehow visible for the tag.
I don't want to uses 'write image' & create a new image from the composited image. I'm trying to use it as client Side thing (I'm not familiar with JS... Yes, I'll look into it but need an alternative till then).
Another alternative that I'm aware of is I should control that WHILE uploading the images but I've already uploaded quite a few so...
Any help appreciated!
Have you tried using the function that generates your image as a src attribute for the <img /> tag?
I don't know exactly how your code is, but I am thinking the end result could be something like:
<img src="data:image/jpeg;base64,<?php echo base64_encode($image_headers); ?>">
You basically output the headers inside the image src as a base64 encoded string.
What you should keep in mind is that you should adjust the image/jpeg type to the corresponding type of your image.
For example:
For JPG, JPEG files it would be image/jpeg
For PNG files it would be image/png
For WEBP files it would be image/webp
And of course the encoded string should be an image of the corresponding format.
I'm building a little site at the moment and users can upload their own profile picture but obviously some users pictures will be png and some jpeg, does anyone know anyway to be able to accept both when using the images as a background image in css. Here is my HTML:
<div class='avatar' style='background-image: url('users/avatars/$username.jpg')'></div>
Inside the users/avatars/ folder is every users profile picture named like so: "username.jpg" or "username.png".
Here is an example of my issue: http://cl.ly/image/3W311S2v0v0t
The first post loads the users profile image because it is a jpeg but the second post hasn't loaded the profile image as it is a png.
Thanks in advance.
You can do it in CSS like this:
background-image: url('users/avatars/$username.jpg'), url('users/avatars/$username.png');
If you absolutely must keep all the logic on the client side, in Javascript, you can catch the error if the image fails to load and attempt to load the other version.
For example:
<div class='avatar'>
<img src="users/avatars/$username.jpg" onerror='this.src="users/avatars/$username.png";' />
</div>
So if the JPG is not found and returns an error, the image will then load the PNG version.
If you are using PHP you can check the file extension and serve up different HTML. Here's how to read the file extension:
How to get the file extension in PHP?
I have this problem, i have this script in php that creates a image on the fly, the problem is that the outputted image on the browser is allright, but i need to change it's name.
Ex: Index.php
<?php $url = "http://www.somesite.com/cls/image_scrc?_aaa=qJ7VgSxWBLG3FfNQVB%2BKI58kfHQulPHZLuLYaZAG6Tk%3D&_ab=3ctGTf547wdsAGjY%2F5FASE%2BpBnbQEAcrhbJzCHQ7mGs%3D&_acb=89e62acf3b4d254abf0c3ab30d6ebb33" ?>
<img src="<?php echo $url ?>" />
The image_scrc.php is the file that creates the image, and as you can see i have several data that is passed by the get method.
In the image_scrc.php i have tryed
header('Content-type: image/jpg');
header('Content-Disposition:inline; filename="'.$random_name_jpeg.'"');
but the html link is is always appearing like this
http://www.somesite.com/cls/image_scrc?_aaa=qJ7VgSxWBLG3FfNQVB%2BKI58kfHQulPHZLuLYaZAG6Tk%3D&_ab=3ctGTf547wdsAGjY%2F5FASE%2BpBnbQEAcrhbJzCHQ7mGs%3D&_acb=89e62acf3b4d254abf0c3ab30d6ebb33
if i select the image on browser and then select copy image link it copies just like this also.
however, when I save the image it assumes the random_name.jpg, but only on save!
i've tried everything, even htaccess rules but nothing seems to work !!
it's this possible to acomplish? transform this
http://www.somesite.com/cls/image_scrc?_aaa=qJ7VgSxWBLG3FfNQVB%2BKI58kfHQulPHZLuLYaZAG6Tk%3D&_ab=3ctGTf547wdsAGjY%2F5FASE%2BpBnbQEAcrhbJzCHQ7mGs%3D&_acb=89e62acf3b4d254abf0c3ab30d6ebb33
to this
http://www.somesite.com/cls/random_name.jpg
i cant have the image on the server side! and must be displayed on the fly
Thanks in advance.
I got images in a php includes file.
<img class="imgmove" src='data:image/png;base64,<?php echo base64_encode(file_get_contents("images/form/firstname.png")); ?>'>
code works flawless. I was testing the design and I dragged an image in to an input bar and it spit back the following:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAAaCAYAAAGMbkETAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77uUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjM4OEE4RjdCQzIwMTFFMTk5RjFBMDZBRkUxMTMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjM4OEE4Rj//z8DMYAJXYCRkRGGz4NonApBoKio6D8QfwCxi4uLwVay4LDJsa+v7wBQsQGIDRIACCBGYtzIguY2kA5GJCEQv5EBZBIyBlqzH+q+BpAbQWIY1oF8B5QUADJBWAEkBhBAGCYhY6h16CAA2TlQdQ0gmomA3w5gEduA5C9DKPsBUaEFiyyQf5GEG4FYH+bK3t5esCKAAGIkNnkQBPjCC8mS/0hhtx8tHIkKK3RQAE1FjGgRQLSL9kMxjB2A5KoEsDpCBiEHNIwNzRAGyA4hymtohiVAvXceb17FkcsYgQYogGho2rkAZYOyqAMIAwQQQa8RyAH/0WL0P1osw7AAVPw8klgDNrVEhTcBR8EiNAGLoxqg+D+S/F1Wn9VSYhdkYSa1TC5H4nX1SB5z9cMmep0xMtcpLoZLt4N4cbPWnkkI2nxTIY7dFjifgyPSqmUVan+IgMF/d9AmwL4dHJrGVb3gy5pS3KKHxkp+QLA3Fr2y8qJNz2p+JlsxgWQ6kaXnAULYRTabuDLGuBWqNocLfwIeaPHXpw7WoToTmdKTftK8/XAvqSXeNMkj5aVSUZpLHVjsljVt8ShBs9WCsQE0otD+yQCR7XW6ZPzQwo2aXfxykiO9nHXMUZVoqlSJSbEl4AqLSmWXNk+3KZM+LFEVSIQNVaYa0uc0TFv5Dy4WkeqRzRdOTLQjIBu7KMRH5A1gQsWa+2upwDVWIFtg0AMRFUHSDYgG8AEDRs0E5ANWiYITEA6QbIB2QA2yAhJN8gG1H7dV671fAsihFpCgfzreR/JMqxsUgqN+zBf7+H6n3vejImks2yBq1hCoC6RjgRRsAWQOYCoQeNbrwHl06TiAk0a1v/g/C5DQLKjxlWMpoiBPG/ovka0WFH6Gf2jsKMZyIdZWaq0LiN6sJ97rNNsBfp5Z+nC6XGjzGTmx97WHoI04tQ40v+lQpyVSMoCkDjvWKwiQ/J7qdkwr4HxFTqXkeOzoItdwdknjN0TDmX45am5iqpH26K01ACzr0Gg7Utg7LQ8IuGSOIHHJwMXWEo63CqASJM3ORvRswbAyIlalyRFik0G6cnRijX8dSRYojogVHHoHQFvc73Uq0tgG0ceAfKoa7RXAxp5XuiLJNMa4yp1dY3SO9gXCSHqDPCaZOAAAAABJRU5ErkJggg==
What is all of that code? can someone tell me? Thanks -- and should I be securing my php file so that it doesn't show this code?
This is the base64 data uri for the image you dragged in . There is not an issue with you php file from what I understand.
You ran base64_encode on the image. That is what base64_encode does, it encodes the image data as base64. What you pasted is what base64 looks like.
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.