CODEWITHSUNDEEP
php
Eugene Liu
Eugene Liu

Reputation: 1

How to resize and display an image from url?

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!

Upvotes: 0

Views: 6365

Answers (3)

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38428

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:

enter image description here

https://example.com/image.jpg

enter image description here

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",
});

Upvotes: 0

Jaymin
Jaymin

Reputation: 1661

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);

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26268

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.

Upvotes: 4

Related Questions