I'm developing a web application to transform images uploaded by the user.
When the user changes the image, it is saved with an other name in the server and served again to the client, like an img tag.
I have a problem when going back to the previous image. The actual image is deleted, and the new image is the previous. But when it is changed again by the user, the image shown isn't the new image, but the deleted image before go back. However, the image shown does not exist. I guess it is cached by the browser, but don't know how to prevent this.
Example:
$image1 = imagefirst.jpg
$image2 = imagechanged.jpg
//Going back:
$image3 = imagefirst.jpg
//imagechanged.jpg is deleted
//change again the image
$image4 = imagechanged.jpg
//serve to the client
<img src="imagefirst.jpg">
//the image shown isn't the new one saved in the server, but the image deleted previously.
Simply add random number to image's src property:
<!-- 759293475438 generated randomly each time -->
<img src='imagefirst.jpg?759293475438'/>
-to do this, you can use mt_rand() in PHP.
A simple solution to this problem would be to add a random string to the image to force the browser to request for a new image every time. You can use uniqid(), rand(), or time() for this purpose:
echo "<img src='imagefirst.jpg?version=".time()."'/>";
This will produce output similar to:
<img src='imagefirst.jpg?version=1378811671' />
As the query string is unique, the image would appear different to the browser.
Related
I have a application which is generating images with file_get_contents and file_put_contents method from a dynamic image source. After creating the image the image is uploaded to a directory on my server. The problem I face is every time the image is generated and I refresh the page I see the old image appear. It shows the new image when I clear the cache.
How could I solve the issue?
<?php
$imagename = "img".$id.".png";
$host = $_SERVER['DOCUMENT_ROOT'];
$path = $host.'/url/path/img/'.$imagename;
if(file_exists($path)) {
//echo 'File already exists in that directory';
unlink($path);
$filehandler = file_get_contents($imgurl);
file_put_contents($path, $filehandler);
}
else {
$filehandler = file_get_contents($imgurl);
file_put_contents($path, $filehandler);
}
It would always be better to use version as query Param to all images, js and css files. Using timestamp will not be as good since it will not be shown from cache if image is not updated. So in order to avoid additional overhead use version of images
That is,
Initially
<img src="image.png?v1" />
Till now next updation occurs this should be the URL
Once it is updated, it should change to
<img src="image.png?v2" />
As the other answers already stated, simplest solution is to add a parameter to the image URL. To still leverage browser caching when the image is unchanged, you should not use a random value.
My recommendation is to use the modification time of the image file, e.g.
<img src="image.png?<?php filemtime('image.png'); ?>" />
This has the advantage, that you don't need to keep track of versions to increment a number or similar.
This can be solved by adding random parameters to the image src, as shown here. For example, turn this:
<img src="image.png" />
Into this:
<img src="image.jpg?1222259157.415">
In the second src, the numbers after the question mark are the current timestamp. This is demonstrated in this answer, which sets the timestamp in JavaScript and appends it to the src using Date.now().
This is an odd question but I'm stuck on how I would achieve this and I am unable to find any methods of doing so.
I have a simple php script that takes variables (containing file names) from the URL, cleans then and then uses them to generate a single image from the inputted values. This works fine and outputs a new png to the webpage using:
imagepng($img);
I also have a facebook sharing script in PHP that takes a filepath as an input and then shares the image on the users feed where this statement is used to define the image variable:
$photo = './mypic.png'; // Path to the photo on the local filesystem
I don't know how I can link these two together though. I would like to use my generation script as the image to share.
Can anyone point me in the right direction of how to do this? I am not the master of PHP so go easy please.
-Tim
UPDATE
If it helps, here are the links to the two pages on my website containing the outputs. They are very ruff mind you:
The php script generating the image:
http://the8bitman.herobo.com/Download/download.php?face=a.png&color=b.png&hat=c.png
The html page with the img tag:
http://the8bitman.herobo.com/Share.html
Treat it as a simple image:
<img src="http://yourserve/yourscript.php?onlyImage=1" />
yourscript.php
if($_GET['onlyimage']) {
header('Content-type:image/png'); //or your image content type
//print only image
} else {
//print image and text too
}
I use wordpress cms. I allow selective people to upload image. I have a script that resizes it and outputs resized image back to the browser where they can right click and save it. Here is the relevant part of the code. If needed I will put up the whole code. The script works and puts the resized image in the browser nicely.
header('Content-type: image/jpeg');
ob_start();
imagejpeg($resized, null, 100);
echo '<img src="data:image/jpeg;base64,' . base64_encode(ob_get_clean()) . '">';
imagedestroy($resized);
ISSUE : The form has just one upload field. I only allow images to be resized and saved one-by-one. Since all these resized images generated by the script has a same name index, an issue arises, which is when the visitor goes to save his image in windows the first time, say in a folder, it is saved as index.jpeg but when he goes to save images after that he is prompted to replace index.jpeg image. Because "these people " are not tech savvy so they usually replace the image end up wasting my time solving the case. So I would like these resized images to have unique name generated either by uniqid() or time().
WHAT I TRIED / AM TRYING : I am confused to what phpfunction I should be using here together with time() so that I could create a new filename each time a resized images is generated. In order to first set a variable, i tried to use basename() function like this, but it wont work.
$new_filename = basename($resized); echo '<br>' .$new_filename. '<br>';
Obviously it throws a warning:basename() expects parameter 1 to be string. I tried that and realized that in this case the variable $resized is a resource not a string. I am still crawling through threads for imagejpeg() at php.net in search of a solution, have not found any resource yet.
Bottomline question : how do I set or get a variable for resized file so
that I can manipulate it alongwith time() to create new names each
time.
FINAL UPDATE : #CBroe, pointed out that this is not possible so I am off to looking for an alternative.
Sending an image in my php form, it gets saved onto my server and at the
action.php page it gets displayed. Now when I try to:
echo '<div id="image"><img src="'.$target_path.'" width="280" height="280"></div>';
it works just fine... but if I add unlink($target_path); at the end of my php code it
will not even display the image even though it gets deleted AFTER displaying the image...
So the question is, how can I display the image and deleting it at the same time so my server does not gets stuffed with user pictures?
Try another thing: output the image base-64 encoded.
$contents = file_get_contents($file);
$base64 = base64_encode($contents);
echo '<div id="image"><img src="data:image/jpg;base64,'.$base64.'" width="280" height="280"></div>';
(instead of move_uploaded_file() etc, use as $file variable the $_FILES[...]['tmp_name'])
You can achieve this by creating a little script that gets the image-filename and will delete it after it has been retrieved:
<?php
$file = image_file_from_parameter($_GET['image']);
headers_for_file($file);
readfile($file);
unlink($file);
In your HTML output you then link to that script:
<img src="path/to/image.php?image=893sudfD983D" />
If you set nice caching headers, the user won't notice that your server did serve the file only once.
When you echo the url of an image with img src you're just sending the browser the url of an image, not the actual image data. The image needs to remain on the server if you want it to be viewable by this approach.
You could use bwoebi's solution to pass the actual image data instead of a link, but a better solution is just to keep the images on the server and periodically delete old files.
How can I display an image and pass it as an input parameter in an executable in php without saving the image in a folder. The user gives the image path as input and I am using ajax to display the image when it is selected when I save it to a folder it works but how can I display it without saving it in a folder? My code now is
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);
//echo "Stored in "."upload/".$_FILES["file"]["name"];
echo "<img src='upload/".$_FILES["file"]["name"]."' class='preview'>";
I tried
<img src=$_FILES["file"]["tmp_name"]. class='preview'>
but it didnt work. As I will have thousands of input from thousands of user I dont want to save it. Is there any optimised and efficient method to do this?
I think, its not possible to show image without saving it. You could try to save the image in temp folder on the server side and clean this folder periodically to avoid much space consumption.
The src attribute of the <img> tag should be an URL accessible by the client.
You try to give a local path (ex: path/to/your/file.jpg) of a temporary file as URL, it will not working.
info: The uploaded image is save on the local disk on a temp directory, and could be deleted by PHP later.
If you want to show the image without moving it at a place reacheable by a URL, you can try to load its content as base64 content
$imagedata = file_get_contents($_FILES["file"]["tmp_name"]);
$base64 = base64_encode($imagedata);
and use in your HTML
<img src="data:image/png;base64, <?php echo $base64; ?>" />
I don't think you can show the image without saving it.
You need to save the file either to the filesystem or to memory if you want to later output
Your problem here is that $_FILES only exists in the script that the image was sent to. so when you initiate another http request for img source, php no longer has any clue what file your trying to read.
You need a way to tell which image to be read on http request.
One thing you can do is that you can save the file in a place accessible by the client and then just have php delete it after you output it. So once the image is outputted it will be deleted and no longer be existing in the file system.
Another approach would be to get the image from the memory by directly writing the contents to httpresponse.
You can do this way
$image = file_get_contents($_FILES["file"]["tmp_name"]);
$enocoded_data = base64_encode($image);
and when you show your image tag :
<img src="data:image/png;base64, <?php echo $enocoded_data ; ?>" />
Hope any of these helps you