How to resize and display an image from url? - php

Question

So I am building a php page and trying to display images in a table
Currently my code looks like this:
echo "<h3>TEST TABLE</h3>";
echo "<table width='350px' border='1px'>"; //blah blah
while ($row2 = $res2->fetch_assoc()){ // takeing data from database as url is stored in mysql database
echo"<tr><td>".$row2['Name']."</td>";
echo"<td>".$row2['Description']."</td>";
$image =$row2['Img'];
$imageData = base64_encode(file_get_contents($image));
echo '<td><img src="data:image/jpeg;base64,'.$imageData.'"></td>'; //So this chunk is how I capture img from url and display
echo "<td><small>$Info</small></td></tr>";
}
echo "</table>";
I did capture and display the images by url successfully. However I am not so sure how I can resize the imgs so they would be in a fixed size like 500x500 or so. Any advice and suggestion would be appreciated! Thanks!

Answer 1

You can simply pass width, height to image tag like:
<img src="data:image/jpeg;base64,'.$imageData.'" height="500" width="500">
where height="500" width="500" means 500px.
And if you want that each image would be of 500x500, than you have to define it at the time of image upload.

Answer 2

Something like this will work,
Fetch the image and store it in an another variable and call the php resizer function and allow php itself to do thumbnails efficiently.
Even you can customize it,
// Get new sizes
list($width, $height) = getimagesize($filename);
$newwidth = $width * $percent;
$newheight = $height * $percent;
// Load
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);
// Resize
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
// Output
imagejpeg($thumb);

Answer 3

If you have multiple images on the page, it would be better to fetch them already resized from the server by specifying the required image size in the URL:
https://example.com/image.jpg
https://example.com/w_120,h_120,c_fill/image.jpg
It can be easily implemented as a Google Cloud Function (see image-resizing npm package):
$ yarn add image-resizing
const { createHandler } = require("image-resizing");
module.exports.img = createHandler({
// Where the source images are located.
// E.g. gs://s.example.com/image.jpg
sourceBucket: "s.example.com",
// Where the transformed images needs to be stored.
// E.g. gs://c.example.com/image__w_80,h_60.jpg
cacheBucket: "c.example.com",
});