Create a simple dynamic image

Here is a really simple example of creating an image in a view on the fly. Perhaps others can expand and enhance ;)

This assumes that you have a running CAKE install.

First create a controller for your dynamic images, in controllers create images_controller.php

<?php
    class ImagesController extends AppController 
    {
        var $name = 'Images';
        var $scaffold;
        var $uses = NULL;
 
        function image () {
            $this->set('data','This is the string.');
            $this->render(null,'ajax');
        }
    }
?>

Then make a view image.thtml

<?php
header("Content-type: image/png");
$im = @imagecreate(100, 50)
   or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 255, 255, 255);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  $data, $text_color);
imagepng($im);
imagedestroy($im);
?>

now view it http://example.com/images/image

Alternately, you can set up your controller and views slightly differently. first the controller

app/controllers/images_controller.php

<?php 
class ImagesController extends AppController {
	
	var $name = 'Images';
	var $uses = null;
	
	// we want to ensure that the default layout doesn't get rendered around your image data
	// that was causing me lots of errors that i thought were BOM errors, until i commented  
	// out the header call in the view file
	
	var $layout = null; 
	
	function thumbnail($filename='') {
		$this->set('image_file',$filename);
	}
}
 
?>
 

Then, lets make some major changes to the View file.

app/views/images/index.thtml

<?php
// create a thumbnail on the fly for product images
// this assumes that you have GD installed and working in your PHP install
 
$parentImage = IMAGES_ROOT.'productImages/'.$image_file;
$thumbImage = IMAGES_ROOT.'productThumbs/'.$image_file;
if(!file_exists($thumbImage)){
 
// the thumbnail does not exist, create it before sending the location of it to the browser.
        ob_start();
        //header("Content-type: image/jpeg");
        $im = imagecreatefromjpeg($parentImage);
        $orig_height = imagesy($im);
        $orig_width = imagesx($im);
        $new_height = 60;
        $new_width = (int) (($new_height / $orig_height) * $orig_width);
        $new_im = imagecreatetruecolor($new_width,$new_height);
        imagecopyresampled($new_im,$im,0,0,0,0,$new_width,$new_height,$orig_width,$orig_height);
        imagejpeg($new_im);
        $image = ob_get_clean();
        $thumb_pointer = fopen($thumbImage,'w+');
        fputs($thumb_pointer,$image,strlen($image));
        fclose($thumb_pointer);
}
header("Location: /img/productThumbs/{$image_file}");
?>
 

Note: i created a constant in paths.php that defines IMAGES_ROOT as the system filepath to where the images are stored, since i didn’t see one in there.

I have created the directory productThumbs with world write permissions, inside webroot/img/

All my fullsize product images are uploaded to webroot/img/productImages/

calling this view looks like this http://localhost/images/thumbnail/filename.jpg if the file exists as a thumb in /img/productThumbs/filename.jpg, then it just sends the redirect to the file, if it doesn’t, well, it will after this call.

If your dynamic images are showing up ‘corrupted’ in the browser so that they can’t be displayed, the problem may be related to file encoding.

If your editor (whatever program you use to edit .php files) allows you to choose different file encodings (also known as character sets), make sure you do NOT use a Unicode (UTF) character set with a “Byte Order Mark”.

The Byte Order Mark is inserted at the beginning of your file (but is not displayed by the text editor). Since it comes before the opening “<?php” at the front of your file, it’s sent back to the browser before PHP even starts processing your script code.

It’s possible that this is only a problem when some of your files have Byte Order Marks, but others do not. (Any help here?)

None of the files that come with cake have Unicode Byte Order Marks. So, if your images are being corrupted, look through your files for any using the BOM. Change the file to a different character set (encoding) and the corruption problem should go away.

can you show me, how can i combine a dynamic created image with other elements in layout?