Question

I am testing a thumbnail image creator script which creates a thumbnail that can be displayed in the web browser without saving it first.

Currently I have to use the following code to display the image:

include('image.inc.php');

    header('Content-Type: image/png');
    create_thumbnail('me.jpg', false, 200, 200);

But how can I display the dynamically generated thumbnail image on a standard webpage along side html mark-up?

create_thumbnail function:

function create_thumbnail($path, $save, $width, $height){

    // Get the width[0] and height[1] of image in an array
    $info = getimagesize($path);

    // Create a new array that just contains the width and height
    $size = array($info[0], $info[1]);

    // Check what file type the image is
    if($info['mime'] == 'image/png'){

        $src = imagecreatefrompng($path);

    }else if($info['mime'] == 'image/jpeg'){

        $src = imagecreatefromjpeg($path);

    }else if($info['mime'] == 'image/gif'){

        $src = imagecreatefromgif($path);

    }else{
        // If it isn't a good file type don't do anything
        return false;
    }

    // Create a thumbnail with the passed dimensions
    $thumb = imagecreatetruecolor($width, $height);


    $src_aspect = $size[0] / $size[1];

    $thumb_aspect = $width / $height;

    if($src_aspect < $thumb_aspect){

        // Image is tall
        $scale = $width / $size[0];
        $new_size = array($width, $width / $src_aspect);
        $src_pos = array(0, ($size[1] * $scale - $height) / $scale / 2);
    }else if($src_aspect > $thumb_aspect){

        // Image is wide
        $scale = $height / $size[1];
        $new_size = array($height * $src_aspect, $height);
        $src_pos = array(($size[0] * $scale - $width) / $scale /2, 0);

    }else{

        // Image is square
        $new_size = array($width, $height);
        $src_pos = array(0, 0);
    }

    // Stop the new dimensions being less than 1 (this stops it breaking the code). Takes which ever value is higher.
    $new_size[0] = max($new_size[0], 1);
    $new_size[1] = max($new_size[1], 1);


    // Copy the image into the new thumbnail 
    // Newly created thumbnail, image copying from, starting x-coord of thumbnail, starting y-coord of thumbnail(0,0 will fill up entire thumbnail), x-coord of original image, y-coord of original image,  width of new thumbnail, height of new thumbnail, width of original image, height of original image
    imagecopyresampled($thumb, $src, 0, 0, $src_pos[0], $src_pos[1], $new_size[0], $new_size[1], $size[0], $size[1]);

    if($save === false){
        return imagepng($thumb);
    }else{

    // Create the png image and save it to passed location
    return imagepng($thumb, $save);
    }

Answer 1

Convert it to base64 (using base64_encode) and then display it with:

<img src="data:image/jpg;base64,iVBORw0KGgoAAAANS==" />