Resize image in php just for viewing

Well, the reason I posted this is because I was not sure what to look for. I will try to explain this as clearly as I can.

Say I have a size of 800x600. The box that I selected for the image is 150x150 and must be satisfied at any time. I can allow images with a maximum size of 150 pixels to be displayed for height and width. Thus, technically, the image should be reduced to 200x150.

Now the question is :

Is there a way to crop the height so that it only shows 150x150? This is for viewing purposes only. I do not need to save the image as a new file.

A good example is your Twitter profile page. It shows that your profile is cropped, but when you click on it, you still get the image that you originally uploaded.

[EDIT] This is what I'm trying to achieve. Get the smaller side in terms of pixels, resize it to 150 pixels, then hide the overflowing part of the other side. Again, there was no saving. Just for people to enjoy.

What I'm trying to accomplish

+4
source share
15 answers

I use a simple PHP class that has several resizing options. You can easily save thumbnails using this class. As @jeroen said, you only need to do this once, and they can be cached. It just requires the PHP5 and GD libraries. Here is a usage example:

// *** Include the class include("resize-class.php"); // *** 1) Initialise / load image $resizeObj = new resize('sample.jpg'); // *** 2) Resize image (options: exact, portrait, landscape, auto, crop) $resizeObj -> resizeImage(150, 150, 'crop'); // *** 3) Save image ('image-name', 'quality [int]') $resizeObj -> saveImage('sample-resized.jpg', 100); 

And this is that class:

 <?php Class resize { // *** Class variables private $image; private $width; private $height; private $imageResized; function __construct($fileName) { // *** Open up the file $this->image = $this->openImage($fileName); // *** Get width and height $this->width = imagesx($this->image); $this->height = imagesy($this->image); } ## -------------------------------------------------------- private function openImage($file) { // *** Get extension $extension = strtolower(strrchr($file, '.')); switch($extension) { case '.jpg': case '.jpeg': $img = @imagecreatefromjpeg($file); break; case '.gif': $img = @imagecreatefromgif($file); break; case '.png': $img = @imagecreatefrompng($file); break; default: $img = false; break; } return $img; } ## -------------------------------------------------------- public function resizeImage($newWidth, $newHeight, $option="auto") { // *** Get optimal width and height - based on $option $optionArray = $this->getDimensions($newWidth, $newHeight, $option); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; // *** Resample - create image canvas of x, y size $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight); imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height); // *** if option is 'crop', then crop too if ($option == 'crop') { $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight); } } ## -------------------------------------------------------- private function getDimensions($newWidth, $newHeight, $option) { switch ($option) { case 'exact': $optimalWidth = $newWidth; $optimalHeight= $newHeight; break; case 'portrait': $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; break; case 'landscape': $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); break; case 'auto': $optionArray = $this->getSizeByAuto($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; case 'crop': $optionArray = $this->getOptimalCrop($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getSizeByFixedHeight($newHeight) { $ratio = $this->width / $this->height; $newWidth = $newHeight * $ratio; return $newWidth; } private function getSizeByFixedWidth($newWidth) { $ratio = $this->height / $this->width; $newHeight = $newWidth * $ratio; return $newHeight; } private function getSizeByAuto($newWidth, $newHeight) { if ($this->height < $this->width) // *** Image to be resized is wider (landscape) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } elseif ($this->height > $this->width) // *** Image to be resized is taller (portrait) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else // *** Image to be resizerd is a square { if ($newHeight < $newWidth) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } else if ($newHeight > $newWidth) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else { // *** Sqaure being resized to a square $optimalWidth = $newWidth; $optimalHeight= $newHeight; } } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getOptimalCrop($newWidth, $newHeight) { $heightRatio = $this->height / $newHeight; $widthRatio = $this->width / $newWidth; if ($heightRatio < $widthRatio) { $optimalRatio = $heightRatio; } else { $optimalRatio = $widthRatio; } $optimalHeight = $this->height / $optimalRatio; $optimalWidth = $this->width / $optimalRatio; return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight) { // *** Find center - this will be used for the crop $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 ); $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 ); $crop = $this->imageResized; //imagedestroy($this->imageResized); // *** Now crop from center to exact requested size $this->imageResized = imagecreatetruecolor($newWidth , $newHeight); imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight); } ## -------------------------------------------------------- public function saveImage($savePath, $imageQuality="100") { // *** Get extension $extension = strrchr($savePath, '.'); $extension = strtolower($extension); switch($extension) { case '.jpg': case '.jpeg': if (imagetypes() & IMG_JPG) { imagejpeg($this->imageResized, $savePath, $imageQuality); } break; case '.gif': if (imagetypes() & IMG_GIF) { imagegif($this->imageResized, $savePath); } break; case '.png': // *** Scale quality from 0-100 to 0-9 $scaleQuality = round(($imageQuality/100) * 9); // *** Invert quality setting as 0 is best, not 9 $invertScaleQuality = 9 - $scaleQuality; if (imagetypes() & IMG_PNG) { imagepng($this->imageResized, $savePath, $invertScaleQuality); } break; // ... etc default: // *** No extension - No save. break; } imagedestroy($this->imageResized); } ## -------------------------------------------------------- } ?> 
+25
source

Download the image, first resize it so that it has a minimum side of 150, then you crop to 150 width / height from the center. Then you simply display the image:

 WideImage::load('yourfile.png/jpg/...') ->resize(150, 150, 'outside', 'any') ->crop('center', 'center', 150, 150) ->output('png'); 

Here you will find source code, documentation, online demos, and API documentation: WideImage .

Let me know if you have any questions.

+4
source

It’s very easy to use here the class http://timthumb.googlecode.com/svn/trunk/timthumb.php here are the parameters http://viralpatel.net/blogs/resize-image-dynamically-php/ I checked the appearance works fine

Example

<img src = "/ script / timthumb.php? src = / some / path / myimage.png & w = 100 & h = 80" alt = "altered image" / ">

+4
source

Why not just do it with CSS and use a server for some kind of processing? There are several ways to do this using CSS. The Clip method is the one I used before, and a Google search will bring you some results. Here is one site that covers it well.

+2
source

I would save the thumbnails, so you only need to do this once and they can be cached. If your aspect ratio is fixed, I would reduce their size to 200x200 (there are several php answers here, so I will skip it). If the aspect ratio changes, I would use a safe value so that it always covers your 150x150 block (e.g. 300x300).

Then I would set the thumbnail as the background image for the image window in css, and you get exactly the effect you want:

 .img_box { background-repeat: no-repeat; background-position: center center; background-image: url(/path/to/image); } 

To improve the experience for browsers that support css3, you can install:

 background-size: cover; 

so that it matches exactly (maintaining the aspect ratio).

+2
source
 <?php $output_width =80; $output_height=80; if(isset($_GET['height'])){ $output_height=$_GET['height']; } if(isset($_GET['width'])){ $output_width=$_GET['width']; } $path = ( (isset($_REQUEST['path']))? $_REQUEST['path'] : ""); //echo $path;exit; $size_arr = getimagesize($path); if ($size_arr[2]==IMAGETYPE_GIF) $image = imagecreatefromgif($path); else if ($size_arr[2]==IMAGETYPE_JPEG) $image = imagecreatefromjpeg($path); else if ($size_arr[2]==IMAGETYPE_PNG) $image = imagecreatefrompng($path); else die_default_image(); $tmpname = tempnam( sys_get_temp_dir() , "phptmp"); resize_image($tmpname, $image, $size_arr, $output_width, $output_height); header('Content-Type: image/jpg'); header('Content-Disposition: inline; filename="'.basename($path).'"'); echo file_get_contents( $tmpname ); unlink( $tmpname ); die(''); function die_default_image() { //43byte 1x1 transparent pixel gif header("content-type: image/gif"); echo base64_decode("R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); } function resize_image($thumbname, $image, $size_arr, $max_width, $max_height)//maintain aspect ratio { $width = $max_width; $height = $max_height; list($width_orig, $height_orig, $img_type) = $size_arr; $ratio_orig = $width_orig/$height_orig; if ($width/$height > $ratio_orig) { $width = floor($height*$ratio_orig); } else { $height = floor($width/$ratio_orig); } // Resample $tempimg = imagecreatetruecolor($width, $height); imagecopyresampled($tempimg, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); imagejpeg($tempimg, $thumbname, 80); } if (!function_exists('sys_get_temp_dir')) { function sys_get_temp_dir() { if (!empty($_ENV['TMP'])) { return realpath($_ENV['TMP']); } if (!empty($_ENV['TMPDIR'])) { return realpath( $_ENV['TMPDIR']); } if (!empty($_ENV['TEMP'])) { return realpath( $_ENV['TEMP']); } $tempfile=tempnam(uniqid(rand(),TRUE),''); if (file_exists($tempfile)) { unlink($tempfile); return realpath(dirname($tempfile)); } } } ?> 

Save the file as imageresize.php and put this file in your image folder and just use this code to show the image

 <img src="<?=base_url().'uploads/imageresize.php?path='.$image."&width=150 &height=150";?>" /> 

You can use this code to display images of different sizes.

+1
source

Here is my Image Resize Class. A class can get the result you want (cropping / centering cropping / etc) ... and much more; -)

I don’t explain everything, but if you have questions, just ask me.

 <?php final class Img { /** * Usage: * Img::resizeImage( 'sample.png', null, array( 'x' => 150, 'y' => 150 ) ) * Outputs a Image * * Img::resizeImage( 'sample.png', 'crop.jpg', array( 'x' => 200, 'y' => 200 ) ) * Saves a Image * * @static * @param string $source * @param null|string $destination * @param array $options * @return void * @throws Exception */ public static function resizeImage( $source, $destination = null, $options = array() ) { if( !file_exists( $source ) || ( is_string( $destination ) && !is_writable( dirname( $destination ) ) ) ) { throw new Exception( 'Quelldatei existiert nicht oder Zielverzeichnis ist nicht beschreibbar.' ); } #@ini_set ('memory_limit', '64M' ); $defaultOptions = array( 'x' => 100, 'y' => 100, 'maxX' => 1000, 'maxY' => 1000, 'zoom_crop' => 1, 'quality' => 90, 'align' => 'c', // [c]enter, [b]ottom, [t]op, [l]eft, [r]ight 'filters' => '', 'sharpen' => 0, 'canvas' => 'ffffff', ); $options = array_merge( $defaultOptions, $options ); $sData = getimagesize( $source ); $origType = $sData[2]; $mimeType = $sData['mime']; if( !preg_match( '/^image\/(?:gif|jpg|jpeg|png)$/i', $mimeType ) ) { throw new Exception( 'The image being resized is not a valid gif, jpg or png.' ); } if( !function_exists( 'imagecreatetruecolor' ) ) { throw new Exception( 'GD Library Error: imagecreatetruecolor does not exist' ); } if( function_exists( 'imagefilter' ) && defined( 'IMG_FILTER_NEGATE' ) ) { $imageFilters = array ( 1 => array (IMG_FILTER_NEGATE, 0), 2 => array (IMG_FILTER_GRAYSCALE, 0), 3 => array (IMG_FILTER_BRIGHTNESS, 1), 4 => array (IMG_FILTER_CONTRAST, 1), 5 => array (IMG_FILTER_COLORIZE, 4), 6 => array (IMG_FILTER_EDGEDETECT, 0), 7 => array (IMG_FILTER_EMBOSS, 0), 8 => array (IMG_FILTER_GAUSSIAN_BLUR, 0), 9 => array (IMG_FILTER_SELECTIVE_BLUR, 0), 10 => array (IMG_FILTER_MEAN_REMOVAL, 0), 11 => array (IMG_FILTER_SMOOTH, 0), ); } $destX = min( $options['x'], $options['maxX'] ); $destY = min( $options['y'], $options['maxY'] ); switch( $mimeType ) { case 'image/jpg': case 'image/jpeg': case 'image/pjgpg': $image = imagecreatefromjpeg( $source ); break; case 'image/png': $image = imagecreatefrompng( $source ); break; case 'image/gif': $image = imagecreatefromgif( $source ); break; } if( !isset( $image ) ) { throw new Exception( 'Could not open Image' ); } $width = imagesx( $image ); $height = imagesy( $image ); $originX = $originY = 0; if( $destX > 0 && $destY == 0 ) { $destY = floor( $height * ( $destX / $width ) ); } else if( $destY > 0 && $destX == 0 ) { $destX = floor( $width * ( $destY / $height ) ); } // scale down and add borders if( $options['zoom_crop'] == 3 ) { $finalY = $height * ( $destX / $width ); if( $finalY > $destY ) { $destX = $width * ( $destY / $height ); } else { $destY = $finalY; } } $canvas = imagecreatetruecolor( $destX, $destY ); imagealphablending( $canvas, false ); if( strlen( $options['canvas'] ) < 6 ) { $options['canvas'] = 'ffffff'; } $canvasColorR = hexdec( substr( $options['canvas'], 0, 2 ) ); $canvasColorG = hexdec( substr( $options['canvas'], 2, 2 ) ); $canvasColorB = hexdec( substr( $options['canvas'], 2, 2 ) ); // transparentes bild erstellen $color = imagecolorallocatealpha( $canvas, $canvasColorR, $canvasColorG, $canvasColorB, 127 ); imagefill( $canvas, 0, 0, $color ); // scale down and add borders if( $options['zoom_crop'] == 2 ) { $finalY = $height * ( $destX / $width ); if( $finalY > $destY ) { $originX = $destX / 2; $destX = $width * ( $destY / $height ); $originX = round( $originX - ( $destX / 2 ) ); } else { $originY = $destY / 2; $destY = $finalY; $originY = round( $originY - ( $destY / 2 ) ); } } // restore transparency blending imagesavealpha( $canvas, true ); if( $options['zoom_crop'] > 0 ) { $srcX = $srcY = 0; $srcW = $width; $srcH = $height; $cmpX = $width / $destX; $cmpY = $height / $destY; // calculate x or y coordinate and width or height of source if( $cmpX > $cmpY ) { // breitformat $srcW = round( $width / $cmpX * $cmpY ); $srcX = round( ( $width - ( $width / $cmpX * $cmpY ) ) / 2 ); } elseif( $cmpY > $cmpX ) { $srcH = round( $height / $cmpY * $cmpX ); $srcY = round( ( $height - ( $height / $cmpY * $cmpX ) ) / 2 ); } // pos cropping if( strlen( $options['align'] ) ) { if( strpos( $options['align'], 't') !== false) { $srcY = 0; } if( strpos( $options['align'], 'b') !== false) { $srcY = $height - $srcH; } if( strpos( $options['align'], 'l') !== false) { $srcX = 0; } if( strpos( $options['align'], 'r') !== false) { $srcX = $width - $srcW; } } imagecopyresampled( $canvas, $image, $originX, $originY, $srcX, $srcY, $destX, $destY, $srcW, $srcH ); } else { imagecopyresampled( $canvas, $image, 0, 0, 0, 0, $destX, $destY, $width, $height ); } // @todo filtermöglichkeit über optionen ausbessern if( strlen( $options['filters'] ) && function_exists( 'imagefilter' ) && defined( 'IMG_FILTER_NEGATE' ) ) { // apply filters to image $filterList = explode( '|', $options['filters'] ); foreach( $filterList as $fl ) { $filterSettings = explode (',', $fl); if (isset ($imageFilters[$filterSettings[0]])) { for ($i = 0; $i < 4; $i ++) { if (!isset ($filterSettings[$i])) { $filterSettings[$i] = null; } else { $filterSettings[$i] = (int) $filterSettings[$i]; } } switch ($imageFilters[$filterSettings[0]][1]) { case 1: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1]); break; case 2: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2]); break; case 3: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3]); break; case 4: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3], $filterSettings[4]); break; default: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0]); break; } } } } if( $options['sharpen'] > 0 && function_exists( 'imageconvolution' ) ) { $sharpenMatrix = array ( array (-1,-1,-1), array (-1,16,-1), array (-1,-1,-1), ); $divisor = 8; $offset = 0; imageconvolution( $canvas, $sharpenMatrix, $divisor, $offset ); } //Straight from Wordpress core code. Reduces filesize by up to 70% for PNG's if( ( IMAGETYPE_PNG == $origType || IMAGETYPE_GIF == $origType ) && function_exists( 'imageistruecolor' ) && !imageistruecolor( $image ) && imagecolortransparent( $image ) > 0 ) { imagetruecolortopalette( $canvas, false, imagecolorstotal( $image ) ); } if( null === $destination ) { header( "Cache-Control: no-store, no-cache, must-revalidate" ); header( "Cache-Control: post-check=0, pre-check=0", false); header( "Pragma: no-cache" ); header( "Expires: Sat, 26 Jul 1997 05:00:00 GMT" ); header( "Last-Modified: " . date( "D, d MYH:i:s" ) . " GMT" ); } switch( $mimeType ) { case 'image/jpg': case 'image/jpeg': case 'image/pjgpg': if( null === $destination ) { header("Content-type: image/jpeg"); } @imagejpeg( $canvas, $destination, $options['quality'] ); break; case 'image/png': if( null === $destination ) { header("Content-type: image/png"); } @imagepng( $canvas, $destination, floor( $options['quality'] * 0.09 ) ); break; case 'image/gif': if( null === $destination ) { header("Content-type: image/gif"); } @imagegif( $canvas, $destination ); break; default: throw new Exception( 'Fehler beim schreiben' ); break; } imagedestroy( $canvas ); imagedestroy( $image ); } } 
+1
source

I do not know this completely, but as soon as I created a program that will view our thumbnail images for our images. And the code is as follows:

 $src=imagecreatefromjpg("file.jpg"); $dest=imagecreatetruecolor($destwidth,$destheight); $src1=imagecopyresized($dest,$src,0,0,0,0,$destwidth,$destheight,$widthresource,$heightresource); echo imagejpeg($dest); 

changing the imagecopyresized parameters that are set to 0,0,0,0 will crop your image from x1, y1 to x2, y2 hope this helps

+1
source

I have a shell script that does exactly what you need with ImageMagick :

 #!/bin/sh SOURCE='/path/to/img' FILE='myfile.jpg' convert $SOURCE/$FILE -thumbnail 150x150^\> -quality 85% \ -gravity center -extent 150x150 ${SOURCE}150/$FILE 
  • This resizes to a field of 150x150 - important ^ after 150x150 !
  • The -thumbnail breaks all meta-information, except for color profiles, and very quickly.
  • Then it cuts the box with 150x150 from the center ( -gravity center -extent 150x150 ) - exactly what you want.
  • In addition, I set -quality 85% , which should be sufficient, while significantly reducing the file size.
  • In this example, I take an image from the img directory and write a sketch with the same file name in the img150 directory next to it.

Experiment for best results.

I need help:
http://www.imagemagick.org/Usage/files/
http://www.imagemagick.org/Usage/resize/
http://www.imagemagick.org/script/command-line-options.php#thumbnail

0
source

As already mentioned, this can be done using CSS if you are not saving the image. Although the download time will be corrupted (loading an 800x600 image or loading an 150x150 image).

HTML:

 <div class="imgHold"> <img src="imgSrc.jpg" /> </div> 

CSS

 div{ overflow:hidden; } img{ width:150px; height:200px; margin-top:-25px; } 
0
source

you can do it with jquery. I assume that you have a class name for the images you want to display cropped. for example, it could be ".cropmyimage", here is the code:

 var objheight = 150; var objwidth = 150; $(".cropmyimage").each(function(){ var elem = $(this); elem.wrap("<div class='cropperdiv'></div>"); var t = new Image(); t.src = elem.attr("src"); t.onload = function(){ var ratio1 = objwidth/objheight; var ratio2 = t.width/t.height; var newheight=0; var newwidth=0; if(ratio1 < ratio2){ newheight = parseInt(objheight); newwidth = parseInt(objheight * ratio2); }else{ newheight = parseInt(objwidth / ratio2); newwidth = "width",objwidth; } elem.width(newwidth).height(newheight).css("margin-left",(objwidth-newwidth)/2).css("margin-top",(objheight-newheight)/2); } elem.parent("div.cropperdiv").css("overflow","hidden").width(objwidth).height(objheight); }); 
0
source

Take a look at WideImage, an open source PHP library for image management. May be as simple as

 WideImage::load('pic.jpg')->resize(150, 150, 'outside')->output('jpg'); 

http://wideimage.sourceforge.net/

0
source

This is exactly what you are looking for, and one more step caching thumbs:

Check out http://phpthumb.gxdlabs.com/

Can you use this script as script.php? img = image.jpg & size = 100, in this case they are in the same script folder.

  <?php require_once '/path/to/ThumbLib.inc.php'; $filename = $_GET['img']; $path = "/upload/item/"; $thumb = $_GET['size']; // Just let specific values $sizeThumb = array('20','40','50','80','100','120','150'); if(in_array($thumb,$sizeThumb)){ $maxWidth = $thumb; $maxHeight = $thumb; } else { header('Status: 404 Not Found'); die; } $pathUrl = _ROOT_FOLDER.'/thumbs/autothumb-'.$thumb.'-'.$filename; if(!file_exists(_ROOT_FOLDER.$path.$filename)) { header('Status: 404 Not Found'); die; } if(!file_exists($pathUrl) ){ $max = PhpThumbFactory::create(_ROOT_FOLDER.$path.$filename); $max->adaptiveResize($maxWidth,$maxHeight)->save($pathUrl); } header('Content-type: image/jpeg'); readfile($pathUrl); ?> 
-one
source

I think a simple stress-free solution will work with css:

1) Apply a class that will give you a cropped image. Do this using a negative field. I did not use the exact margin, using it as you need. 2) When hovering, we rewrite the marging attribute so that it gives you the real image.

 css: <style> .crop:hover{ margin:0; } .crop { margin:-100px -15px -40px -55px; } </style> 

HTML:

 <img class="crop" src="image.jpg" /> 
-3
source

just use <img src='source' width="150" height="150" /> it will resize the image. although this would not be preferable because it puts a strain on the browser.

-5
source

Source: https://habr.com/ru/post/1399972/


All Articles