CODEWITHSUNDEEP
phphtmlimage
Stuart Brian
Stuart Brian

Reputation: 135

Php image resize in output

I have this php function to resize image according to where i need it and the size i wish to display. But my problem is how to i set it to display resized image in html image element without setting the php content type to image? If i set content type to image it will display the image in the whole page and if i remove it it will output long unknown characters, how do i do this to get what i want?

    <?php
    function CroppedThumbnail($imagename, $imgwidth, $imgheight){
// Set a maximum height and width
$width = $imgwidth;
$height = $imgheight;
// Content type
//header('Content-Type: image/jpeg');
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($imagename);
$ratio_orig = $width_orig/$height_orig;
if ($width/$height > $ratio_orig) {
   $width = $height*$ratio_orig;
} else {
   $height = $width/$ratio_orig;
}
// Resample
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefromjpeg($imagename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
// Output
imagejpeg($image_p, $imagename, 100);
return $imagename;
}

$filename1 = 'http://static1.techlosofy.com/wp-content/uploads/YouTube-Logo-Large.jpg';
$filename2 = 'http://static1.techlosofy.com/wp-content/uploads/YouTube-Logo-Small.jpg';
echo '<img data="image1" src="'.CroppedThumbnail($filename1, 100, 100).'"/>';
echo '<img data="image2" src="'.CroppedThumbnail($filename2, 100, 100).'"/>';
    ?>

I want to resize any image that i call this function on

Upvotes: 0

Views: 3863

Answers (3)

Gayan Sandamal
Gayan Sandamal

Reputation: 337

I found a mathematical way to get this job done

Github repo - https://github.com/gayanSandamal/easy-php-image-resizer

Live example - https://plugins.nayague.com/easy-php-image-resizer/

<?php
//path for the image
$source_url = '2018-04-01-1522613288.PNG';

//separate the file name and the extention
$source_url_parts = pathinfo($source_url);
$filename = $source_url_parts['filename'];
$extension = $source_url_parts['extension'];

//define the quality from 1 to 100
$quality = 10;

//detect the width and the height of original image
list($width, $height) = getimagesize($source_url);
$width;
$height;

//define any width that you want as the output. mine is 200px.
$after_width = 200;

//resize only when the original image is larger than expected with.
//this helps you to avoid from unwanted resizing.
if ($width > $after_width) {

    //get the reduced width
    $reduced_width = ($width - $after_width);
    //now convert the reduced width to a percentage and round it to 2 decimal places
    $reduced_radio = round(($reduced_width / $width) * 100, 2);

    //ALL GOOD! let's reduce the same percentage from the height and round it to 2 decimal places
    $reduced_height = round(($height / 100) * $reduced_radio, 2);
    //reduce the calculated height from the original height
    $after_height = $height - $reduced_height;

    //Now detect the file extension
    //if the file extension is 'jpg', 'jpeg', 'JPG' or 'JPEG'
    if ($extension == 'jpg' || $extension == 'jpeg' || $extension == 'JPG' || $extension == 'JPEG') {
        //then return the image as a jpeg image for the next step
        $img = imagecreatefromjpeg($source_url);
    } elseif ($extension == 'png' || $extension == 'PNG') {
        //then return the image as a png image for the next step
        $img = imagecreatefrompng($source_url);
    } else {
        //show an error message if the file extension is not available
        echo 'image extension is not supporting';
    }

    //HERE YOU GO :)
    //Let's do the resize thing
    //imagescale([returned image], [width of the resized image], [height of the resized image], [quality of the resized image]);
    $imgResized = imagescale($img, $after_width, $after_height, $quality);

    //now save the resized image with a suffix called "-resized" and with its extension. 
    imagejpeg($imgResized, $filename . '-resized.'.$extension);

    //Finally frees any memory associated with image
    //**NOTE THAT THIS WONT DELETE THE IMAGE
    imagedestroy($img);
    imagedestroy($imgResized);
}
?>

Upvotes: 1

RajeshK
RajeshK

Reputation: 461

I would suggest an simple change to your code which will fulfill your requirement as well as will be reusable one.

Here we can separate resize functionality into separate file.

resize.php

<?php
 function CroppedThumbnail($imagename, $imgwidth, $imgheight){

 // Set a maximum height and width
    $width = $imgwidth;
    $height = $imgheight;

// Get new dimensions
   list($width_orig, $height_orig) = getimagesize($imagename);
   $ratio_orig = $width_orig/$height_orig;

   if ($width/$height > $ratio_orig) {
     $width = $height*$ratio_orig;
   } else {
     $height = $width/$ratio_orig;
   }

 // Resample
    $image_p = imagecreatetruecolor($width, $height);
    $image = imagecreatefromjpeg($imagename);
    imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height,  $width_orig, $height_orig);

   // Output
   return imagejpeg($image_p, null, 100);
}

  header('Content-Type: image/jpeg');
  echo CroppedThumbnail($_GET['imagename'], $_GET['width'], $_GET['height'])
?>

Now we can use above resize file to render resized image by passing image name,height and width by into request.
example.php

 <?php
    $filename1 = 'path and file name of image 1 here';
    $filename2 = 'path and file name of image 2 here';

    echo '<img data="image1" src="imagetest.php?imagename='. $filename1 .'&height=100&width=100"/>';
    echo '<img data="image2" src="imagetest.php?imagename='. $filename2 .'&height=100&width=100"/>';
 ?>

Upvotes: 1

KiwiJuicer
KiwiJuicer

Reputation: 1972

$newFile = 'images/newFile.jpg';

imagejpeg($image_p, $newFile, 100);

return '/' . $newFile;

I have edited your code:

<?php
function CroppedThumbnail($imagename, $imgwidth, $imgheight){
// Set a maximum height and width
    $width = $imgwidth;
    $height = $imgheight;
// Content type
//header('Content-Type: image/jpeg');
// Get new dimensions
    list($width_orig, $height_orig) = getimagesize($imagename);
    $ratio_orig = $width_orig/$height_orig;
    if ($width/$height > $ratio_orig) {
        $width = $height*$ratio_orig;
    } else {
        $height = $width/$ratio_orig;
    }
// Resample
    $image_p = imagecreatetruecolor($width, $height);
    $image = imagecreatefromjpeg($imagename);
    imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
// Output
    $newFileName = 'images/newFile.jpg';
    imagejpeg($image_p, $newFileName, 100);

    return '/' . $newFileName;
}
$filename1 = 'http://static1.techlosofy.com/wp-content/uploads/YouTube-Logo-Large.jpg';
echo '<img data="image1" src="'.CroppedThumbnail($filename1, 100, 100).'"/>';
?>

Upvotes: 1

Related Questions