resize image on the fly - php

I've built a gallery using ci where the image that is uploaded is kept its same size as long as its within 3000x5000 px range. Upon displaying them and since i haven't cropped thumbnails , how can I re size them when needed so say i want to re-size a list of them as 150x150 how would i go about this?
i followed the guide
http://ellislab.com/codeigniter/user-guide/libraries/image_lib.html
Problem is when loading the library it wants me to specify each images complete config information.
So say I loaded the variable into a controller to be displayed in a view, and when loading it would look like this:
foreach($gallery as $img)
{
echo "<div>";
echo "<img src='" . $this->img_lib->resize($img->imagepath, 150, 150) . "'>";
echo "</div>";
}
ps: does the image gets saved when its resized? because i dont want that.
better solution: http://www.matmoo.com/digital-dribble/codeigniter/image_moo/

I know how to do it outside of ci. Essentially the img "src" needs to equal a php script OR be intercepted by htaccess which then redirects it to a php script.
You could try something like this:
foreach($gallery as $img)
{
echo "<div>";
echo "<img src='/imageResize.php?path=" . $img->imagepath . "'>";
echo "</div>";
}
File: imageResize.php
$path = $_REQUEST['path'];
$this->img_lib->resize($path, 150, 150);
Depending on the folder structure of your site it would be better to just pass the filename rather than the full path. Even better is to use .htaccess (which I do in our CMS) to intercept the image and resize/crop on the fly. e.g. <img src="/path/to/image.jpg?w=150&h=150" />
Does that help provide some direction?
On your other question, a physical file isn't saved on the server unless you specify it to do so.

The answer from #SaRiD is on the right track. However, it doesn't necessarily have to be outside of CI. You can point the image source to a controller method that takes care of the resizing and serve the image.
You also need to use the correct headers to identify the image resource to the browser, within this method.
You state that you do not want to save the thumbnail. This obviously depend on the need of the application. You can set it in a way that it serves the previously cropped and saved thumbnails to the browser if that exists (from a previous request), rather than creating and serving thumbnails each time - it will save you some CPU cycles.

Related

Right way of watermarking & storing & displaying images in PHP

I'm building a web based system, which will host loads and loads of highres images, and they will be available for sale. Of course I will never display the highres image, instead when browsing people will only see a low resolution, watermarked image. Currently the workflow is as follows:
PHP script handles the highres image upload, when image is uploaded, it's automatically re-sized to a low res image and to a thumbnail image as well and both of the files are saved on the server, (no watermark is added).
When people are browsing, the page displays the thumbnail of the image, on click, it enlarges and displays the lowres image with watermark as well. At the time being I apply the watermark on the fly whenever the lowres image is opened.
My question is, what is the correct way:
1) Should I save a 2nd copy of the lowres image with thumbnail, only when it's access for the first time? I mean if somebody access the image, I add the watermark on the fly, then display the image & store it on the server. Next time the same image is accessed if a watermarked copy exist just display the wm copy, otherwise apply watermark on the fly. (in case watermark.png is changed, just delete the watermarked images and they will be recreated as accessed).
2) Should I keep applying watermarks on the fly like I'm doing now.
My biggest question is how big is the difference between a PHP file_exists(), and adding a watermark to an image, something like:
$image = new Imagick();
$image->readImage($workfolder.$event . DIRECTORY_SEPARATOR . $cat . DIRECTORY_SEPARATOR .$mit);
$watermark = new Imagick();
$watermark->readImage($workfolder.$event . DIRECTORY_SEPARATOR . "hires" . DIRECTORY_SEPARATOR ."WATERMARK.PNG");
$image->compositeImage($watermark, imagick::COMPOSITE_OVER, 0, 0);
All lowres images are 1024x1024, JPG with a quality setting of 45%, and all unnecessary filters removed, so the file size of a lowres image is about 40Kb-80Kb.
It is somehow related to this question, just the scale and the scenarios is a bit different.
I'm on a dedicated server (Xeon E3-1245v2) cpu, 32 GB ram, 2 TB storage), the site does not have a big traffic overall, but it has HUGE spikes from time to time. When images are released we get a few thousand hits per hours with people browsing trough the images, downloading, purchasing, etc. So while on normal usage I'm sure that generating on the fly is the right approach, I'm a bit worried about the spike period.
Need to mention that I'm using ImageMagick library for image processing, not GD.
Thanks for your input.
UPDATE
None of the answers where a full complete solution, but that is good since I never looked for that. It was a hard decision which one to accept and whom to accord the bounty.
#Ambroise-Maupate solution is good, but yet it's relay on the PHP to do the job.
#Hugo Delsing propose to use the web server for serving cached files, lowering the calls to PHP script, which will mean less resources used, on the other hand it's not really storage friendly.
I will use a mixed-merge solution of the 2 answers, relaying on a CRON job to remove the garbage.
Thanks for the directions.
Personally I would create a static/cookieless subdomain in a CDN kinda way to handle these kind of images. The main reasons are:
Images are only created once
Only accessed images are created
Once created, an image is served from cache and is a lot faster.
The first step would be to create a website on a subdomain that points to an empty folder. Use the settings for IIS/Apache or whatever to disable sessions for this new website. Also set some long caching headers on the site, because the content shouldn't change
The second step would be to create an .htaccess file containing the following.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*) /create.php?path=$1 [L]
This will make sure that if somebody would access an existing image, it will show the image directly without PHP interfering. Every non-existing request will be handled by the create.php script, which is the next thing you should add.
<?php
function NotFound()
{
if (!headers_sent()) {
$protocol = (isset($_SERVER['SERVER_PROTOCOL']) ? $_SERVER['SERVER_PROTOCOL'] : 'HTTP/1.0');
header($protocol . ' 404 Not Found');
echo '<h1>Not Found</h1>';
exit;
}
}
$p = $_GET['path'];
//has path
if (strlen($p)<=1)
NotFound();
$clean = explode('?', $p);
$clean = explode('#', $clean[0]);
$params = explode('/', substr($clean[0], 1)); //drop first /
//I use a check for two, because I dont allow images in the root folder
//I also use the path to determine how it should look
//EG: thumb/125/90/imagecode.jpg
if (count($params)<2)
NotFound();
$type = $params[0];
//I use the type to handle different methods. For this example I only used the full sized image
//You could use the same to handle thumbnails or cropped/watermarked
switch ($type) {
//case "crop":if (Crop($params)) return; else break;
//case "thumb":if (Thumb($params)) return; else break;
case "image":if (Image($params)) return; else break;
}
NotFound();
?>
<?php
/*
Just some example to show how you could create a responds
Since you already know how to create thumbs, I'm not going into details
Array
(
[0] => image
[1] => imagecode.JPG
)
*/
function Image($params) {
$tmp = explode('.', $params[1]);
if (count($tmp)!=2)
return false;
$code = $tmp[0];
//WARNING!! SQL INJECTION
//USE PROPER DB METHODS TO GET REALPATH, THIS IS JUST EXAMPLE
$query = "SELECT realpath FROM images WHERE Code='".$code."'";
//exec query here to $row
$realpath = $row['realpath'];
$f = file_get_contents($realpath);
if (strlen($f)<=0)
return false;
//create folder structure
#mkdir($params[0]);
//if you had more folders, continue creating the structure
//#mkdir($params[0].'/'.$params[1]);
//store the image, so a second request won't access this script
file_put_contents($params[0].'/'.$params[1], $f);
//you could directly optimize the image for web to make it even better
//optimizeImage($params[0].'/'.$params[1]);
//now serve the file to the browser, because even the first request needs to show the image
$finfo = finfo_open(FILEINFO_MIME_TYPE);
header('Content-Type: '.finfo_file($finfo, $params[0].'/'.$params[1]));
echo $f;
return true;
}
?>
I would suggest you to create watermarked images on-the-fly and to cache them at the same time as everybody suggested.
Then you could create a garbage-collector PHP script that will be executed every days (using cron). This script will browse your cache folder to read every image access time. This can done using fileatime() PHP method. Then when a cached wm image has not been accessed within 24 or 48 hours, just delete it.
With this method, you can handle spike periods as images are cached at the first request. AND you will save your HDD space as your garbage-collector script will delete unused images for you.
This method will only work if your server partition has atime updates enabled.
See http://php.net/manual/en/function.fileatime.php
For most scenarios, lazily applying the watermark would probably make most sense (generate the watermarked image on the fly when requested then cache the result) however if you have big spikes in demand you are creating a mechanism to DOS yourself: create the watermarked version on upload.
Considering your HDD storage capacity and Pikes.
I would only create a watermarked image if it is viewed.(so yes on the fly) In that way you dont use to much space with a bunch a files that are or might not be viewed.
I would not watermark thumbnails i would rather make a filter that fake watermark and protect from being saved. That filter would apply to all thumbnails without creating a second image.
In this way all your thumbbails are watermarked (Fake with onther element on top).
Then if one of these thumbnails is viewed it generate a watermarked image (only once) since after its generated you load the new watermarked image.
This would be the most efficient way to deal with your HDD storage and Pikes.
The other option would be to upgrade your hosting services. Godaddy offer unlimited storage and bandwith for about 50$ a year.

cycle2 fails with images inside php script

I can't get the cycle2 pager to work and I've checked the various questions and answers on this topic. I'm beginning to think it may have to do with my setup: the user clicks one of several buttons and that brings up one or more thumbnail images from a mysql database. Each thumbnail is related via the database to one or more larger images that I'd like to play in a slideshow. An ajax call sends the info about which thumb was clicked and a server page retrieves the larger images from a directory and displays them all in a div on the calling page as follows:
<?php
$thumb_path = $_POST['thumb_path'];
ob_start();
echo basename($thumb_path, ".png");
$thumb_name = ob_get_contents();
ob_end_clean();
$dir = "pathTo/$thumb_name/*.png";
$images = glob( $dir );
foreach( $images as $image ):
echo "<img src='" . $image . "' />";
endforeach;
?>
So far, so good as all the larger images are displayed (statically, all at once) in the div. The problem comes when I try to wrap the php script above in any of the cycle2 pagers (I'd like to use the one that automatically creates thumbnails for navigating the larger images, but none work). What happens is that all the larger images are loaded on top of each other without any navigation controls (thumbnails, dots, numbers etc. as the case may be). The larger images do play if I set the
data-cycle-timeout
parameter to something other than zero, but I'd like to set it to zero and let the users navigate the larger images themselves.
I'm a total noob at web programming and it's taken a while to get this stuff to work, chiefly by studying code snippets I've found on the web. I hope any solution doesn't involve a major redesign.
Thanks in advance for any help.

uniquely name images that are output to browser with php script

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.

Display user input image without saving it to a folder

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

How to save a phpthumb output into a file?

I am trying to save PhpThumb output. As what I could find on-line was not sufficient or too complex, I would like to ask if any one knows how to it?
$thumb_src="\"phpThumb/phpThumb.php?src=../apartmentsPhotos/".$num['ref']."/1.JPG&h=119&q=100\"";
echo" '<'img src=".$thumb_src />";
So what I want to do is to save the img src into an Image.
(So far I was creating the thumbnails on the fly but it seems that google and my web server donĀ“t like it too much. Saving the thumbnails will ensure that in no time I will have all my thumbnails in real files and then I will use this function just for new content.)
From phpThumb's FAQ
The best way is to call phpThumb as an object and call RenderToFile() to save the
thumbnail to whatever filename you want. See /demo/phpThumb.demo.object.php for an example. The other way is to use the 'file' parameter (see /docs/phpthumb.readme.txt) but this parameter is deprecated and does not work in phpThumb v1.7.5 and newer.
Once you have generated the URL with this line you posted:
$thumb_src="\"phpThumb/phpThumb.php?src=../apartmentsPhotos/".$num['ref']."/1.JPG&h=119&q=100\"";
Pass it as a $_GET variable to another page, call it serveThumb.php:
if (!isset($_GET['img']))
exit;
header('Content-type: application/pdf');
echo file_get_contents($_GET['img']);
You might have to add your own validation to serveThumb.php. Now you can save the result of serveThumb.php as a JPG.
Alternatively, save the contents of the image as a JPG file.
if (!isset($_GET['img']))
exit;
$img = file_get_contents($_GET['img']);
file_put_contents("myImage.jpg", $img);

Categories