Resize And Display Thumbnail Within Other Page Content

[crwork]

I'm calling a web resource to retrieve a base64 encoded image, and then re-sizing it into a small thumbnail to insert into the site header.

 

Most examples of PHP image re-sizing/display I've seen online assume you want to display the image on a page by itself using the header function. The page I'm working on has tons of content, so I don't want to get the headers already sent error. I want to set up the thumbnail within an IMG tag and don't want to save the image thumbnail to a file.

 

I stumbled upon a comment someone made on php.net that is doing the trick for me in a test environment. It suggests using a separate file (thumbnail.php) to display the image via imagepng(), then in the original page (testpage.php) use an IMG tag to call thumbail.php.

 

However, I wanted to see if this method was the most efficient way of accomplishing this. Since I didn't see a lot written about this specific need I have, I wanted to double-check here to see if anyone had a better idea.

 

Here is the code that works to 1) re-size a large image into a small thumbnail, and 2) displaying the image on a test page with other content.

 

thumbnail.php

// Decode base64 encoded image into Image
$imgDecoded = base64_decode($userImage64);

// Requires string image as parm, returns image resource
$im = imagecreatefromstring($imgDecoded);

// Get width and height of original image resource
$origWidth = imagesx($im);
$origHeight = imagesy($im);

// Create new destination image resource for new 24 x 24 image
$imNew = imagecreatetruecolor(24, 24);

// Re-sample image to smaller size and display
imagecopyresampled($imNew, $im, 0, 0, 0, 0, 24, 24, $origWidth, $origHeight);
imagepng($imNew);
imagedestroy($im);
imagedestroy($imNew);

 

Then in the content page:

 

<p>Here is some content</p>
echo "<img src=\"thumbnail.php\">";
<p>Here is some more content</p>

 

Since I'm the only PHP programmer here, there's no-one to bounce this off of, so if anyone has thoughts on a better or more efficient way to do this, please feel free. Thanks...

[premiso]

Is that your full thumbnail.php? If it is, you need to also specify the image headers, if not can you post the whole thing so we can verify?

[crwork]

Sorry, I just posted a slice of it. Yes, I do have a "header" statement at the top of thumbnail.php. There are some curl commands in the file I left out for readability. Here's the code minus the curl commands:

 

thumbnail.php

<?php
header("Content-type: image/png");

// curl stuff
.
.
.
// Decode base64 encoded image into Image
$imgDecoded = base64_decode($userImage64);

// Requires string image as parm, returns image resource
$im = imagecreatefromstring($imgDecoded);

// Get width and height of original image resource
$origWidth = imagesx($im);
$origHeight = imagesy($im);

// Create new destination image resource for new 24 x 24 image
$imNew = imagecreatetruecolor(24, 24);

// Re-sample image to smaller size and display
imagecopyresampled($imNew, $im, 0, 0, 0, 0, 24, 24, $origWidth, $origHeight);
imagepng($imNew);
imagedestroy($im);
imagedestroy($imNew);

[premiso]

Gotcha and I did actually read your tl;dr as far as it being the most efficient, potentially. If you are going to use the thumbnail a ton, it might be worth it to run the script once and save it as a static file on the server. That should save processing time. But depending on the server and the number of hits it may or may not be necessary.

[crwork]

Thanks premiso. And good point about running the script once and saving the user's thumbnail on the server. I will have to put some thought into whether or not we'll need to do it, but it's now on my to-do list.