Image resizing made easy with php

Step 6 How to Resize

This is where the love happens. This step is really just an explanation of what we’re going to do — so no homework here. In the next step, we’re going to create a public method that we’ll call to perform our resize; so it makes sense to pass in the width and height, as well as information about how we want to resize the image. Let’s talk about this for a moment. There will be scenarios where you would like to resize an image to an exact size. Great, let’s include this. But there will also be times when you have to resize hundreds of images and each image has a different aspect ratio — think portrait images. Resizing these to an exact size will cause severe distortion.If we take a look at our options to prevent distortion we can:


  1. Resize the image as close as we can to our new image dimensions, while still keeping the aspect ratio.
  2. Resize the image as close as we can to our new image dimensions and crop the remainder.

Both options are viable, depending on your needs.

Yep. we’re going to attempt to handle all of the above. To recap, we’re going to provide options to:

  1. Resize by exact width/height. (exact)
  2. Resize by width — exact width will be set, height will be adjusted according to aspect ratio. (landscape)
  3. Resize by height — like Resize by Width, but the height will be set and width adjusted dynamically. (portrait)
  4. Auto determine options 2 and 3. If you’re looping through a folder with different size photos, let the script determine how to handle this. (auto)
  5. Resize, then crop. This is my favourite. Exact size, no distortion. (crop)

Quality

The properties and are available for you to configure:

$image = new ImageResize('image.jpg');
$image->quality_jpg = 100;
$image->resize(800, 600);
$image->save('image2.jpg');

You can also pass the quality directly to the , and methods:

$image = new ImageResize('image.jpg');
$image->crop(200, 200);
$image->save('image2.jpg', null, 100);

$image = new ImageResize('image.jpg');
$image->resizeToWidth(300);
$image->output(IMAGETYPE_PNG, 4);

$image = new ImageResize('image.jpg');
$image->scale(50);
$result = $image->getImageAsString(IMAGETYPE_PNG, 4);

We’re passing for the image type in the example above to skip over it and provide the quality. In this case, the image type is assumed to be the same as the input.

Get Resource Id for Target Image Layer

After getting reference resource id from source image file, we need to create a new image as a target layer. This image will be created with the dimensions to what the original image is expected to be resized.

PHP built-in function, named as, imagecreatetruecolor() is used for this purpose, by accepting required dimensions, that is, the width and height of the target image. For example,

$target_width =200;
$target_height =200;
$target_layer=imagecreatetruecolor($target_width,$target_height);

imagecreatetruecolor() function will create empty image. Added to that, it will return resource data identifier as a reference to the newly created image with specified width and height parameter. This reference will be used in subsequent steps, for mentioning target, on top of which the resized image will be assembled.

Вращение, масштабирование, обрезка и переворот изображения

Некоторые общие операции, которые вы можете выполнять на ресурсе изображения, — это вращение, масштабирование, обрезка и переворот.

Вращение

Вы можете повернуть изображение, которое вы уже загрузили в скрипт, используя функцию . Она будет вращать изображение под заданным углом, используя центр изображения в качестве центра вращения. Угол представлен как значение с плавающей точкой, и PHP считает, что это значение угла вращения. Иногда повернутое изображение будет иметь разные размеры по сравнению с исходной версией. Это означает, что после поворота вы получите некоторую открытую область. Третий параметр функции может использоваться для задания цвета фона пустой области после вращения.

Масштабирование

Очень просто масштабировать изображение с помощью библиотеки GD. Вам просто нужно передать ресурс изображения, а также ширину и высоту в функцию . Если вы опустите высоту, GD будет масштабировать изображение до указанной ширины, сохраняя соотношение сторон. Вы также можете указать режим масштабирования изображения. Его можно установить в , , и т.д. Важная вещь, которую вам нужно запомнить, это то, что эта функция возвращает новый источник масштабированного изображения вместо того, чтобы изменять исходный.

Обрезка

Вы можете обрезать любой ресурс изображения с помощью функции в GD. Первый параметр — исходный ресурс изображения, а второй параметр — ассоциативный массив с ключами , , и , определяющий размеры позиции окна обрезки.

Изображение бабочки выше было обрезано с использованием следующего кода:

В основном, мы сохраняем длину самой маленькой стороны в переменной . Затем эта переменная используется для определения границы нашего прямоугольника обрезки. Наконец, изображение уменьшено таким образом, что оно составляет всего 300 пикселей в ширину и длину. Это дает нам квадратное изображение.

Переворот изображений

Изображения можно перевернуть горизонтально, вертикально или в обоих направлениях с помощью функции . Она принимает ресурс изображения, который вы хотите перевернуть, в качестве первого параметра, и режим переворота в качестве второго параметра. Режим переворота может быть установлен на , или .

Верхнее левое изображение на приведенном выше рисунке является оригиналом. Верхнее правое изображение было создано с помощью , нижнее левое изображение было создано с использованием , а нижнее правое изображение — с помощью . (Изображение вороны от Pixabay.)

Image Optimization in PHP

You can optimize images in PHP in one of the following ways:

  • Through PHP’s built-in functions, such as `imagejpeg(). That function takes the path of the output image and quality specification between 1 and 100. As a prerequisite, install the GD library for PHP.
  • Through the Image Optimizer, which is a PHP library, built by Piotr Sliwa, for optimizing images by leveraging several libraries, including OptiPNG, , and ](http://jpegclub.org/jpegtran/). The Image Optimizer can compress image files by 10-70 percent without sacrificing visual appeal.
  • With the PHP Image Cache, a simple PHP class that compresses images on the fly. Once compression is complete, the Image Cache caches the image in your browser and then returns the image’s new source.
  • With Imagick, a native PHP extension for creating and modifying images by means of the ImageMagick API.

Загрузка и сжатие изображения в PHP

<?php 
// ПРИМЕР ФАЙЛА. 
$filename = 'test.jpg'; 
// ПРОВЕРКА НА ИЗОБРАЖЕНИЕ
$size = getimagesize($filename); // если это изображение и у него определён размер, то продолжаем
if ($size){
// ОПРЕДЕЛЯЕМ МАКСИМАЛЬНЫЕ ШИРИНУ И ВЫСОТУ ИЗОБРАЖЕНИЯ
$width = 200; 
$height = 200; 
// РАБОТАЕМ КОРРЕКТНО. ОПРЕДЕЛЯЕМ ТИП
header("Content-type: {$size}");
// ПОЛУЧАЕМ НОВЫЕ РАЗМЕРЫ
list($width_orig, $height_orig) = getimagesize($filename); 
if ($width && ($width_orig < $height_orig)) { 
    $width = ($height / $height_orig) * $width_orig; 
} else { 
    $height = ($width / $width_orig) * $height_orig; 
} 
// ПЕРЕСОХРАНЯЕМ ИЗОБРАЖЕНИЕ
$image_p = imagecreatetruecolor($width, $height); 
$image = imagecreatefromjpeg($filename); 
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); 
// СОЗДАЁМ
imagejpeg($image_p, null, 100); 
// УДАЛЯЕМ ИСХОДНИК - НУЖЕН АДРЕС. НАПРИМЕР, images/img001.jpg
unlink ($filename);
} else {
exit("Загружаемый файл не изображение...");
}
?>

Step 4 The Constructor

We’re going to modify the constructor method above. Firstly, we’ll pass in the filename (and path) of our image to be resized. We’ll call this variable $fileName.

We need to open the file passed in with PHP (more specifically the PHP GD Library) so PHP can read the image. We’re doing this with the custom method ‘openImage’. I’ll get to how this method works in a moment, but for now, we need to save the result as a class variable. A class variable is just a variable — but it’s specific to that class. Remember the class variable comment I mentioned previously? Add ‘image’ as a private variable by typing ‘private $image;’. By setting the variable as ‘Private’ you’re setting the scope of that variable so it can only be accessed by the class. From now on we can make a call to our opened image, known as a resource, which we will be doing later when we resize.

While we’re at it, let’s store the height and width of the image. I have a feeling these will be useful later.

You should now have the following.

Methods imagesx and imagesy are built in functions that are part of the GD library. They retrieve the width and height of your image, respectively.

3. Getting Started:

To get started, call the constructor, and pass a path to a valid image to it:

Note: In order to use a remote URL, your PHP configuration must have the directive enable. If this is disabled, a fatal error will be thrown from the constructor stating that the source image does not exist.

Once you have created a new object, it is possible to perform functions on the image (these functions are listed in Section 4). After applying functions and resize methods to the image, you are then able to output the generated image file to the browser, or force it to download to the user’s computer by using the and methods respectively.

To learn more about the usage of the library, please see the directory in this repository.

9. License:

Licensed under the MIT License:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:


The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Installation

You can install the package via composer:

composer require spatie/image-optimizer

Optimization tools

The package will use these optimizers if they are present on your system:

  • SVGO

Here’s how to install all the optimizers on Ubuntu:

sudo apt-get install jpegoptim
sudo apt-get install optipng
sudo apt-get install pngquant
sudo npm install -g svgo
sudo apt-get install gifsicle
sudo apt-get install webp
brew install jpegoptim
brew install optipng
brew install pngquant
brew install svgo
brew install gifsicle
brew install webp

And here’s how to install the binaries on Fedora/RHEL/CentOS:

sudo dnf install epel-release
sudo dnf install jpegoptim
sudo dnf install optipng
sudo dnf install pngquant
sudo npm install -g svgo
sudo dnf install gifsicle
sudo dnf install libwebp-tools

Подготовка

Для начала нам нужна форма для загрузки. Возьмём простейшую форму.

XHTML

<form enctype=»multipart/form-data» method=»post»> <input name=»picture» type=»file» /> <input type=»submit» value=»Загрузить» /> </form>

1 2 3 4

<form enctype=»multipart/form-data»method=»post»>

<input name=»picture»type=»file» />

<input type=»submit»value=»Загрузить» />

</form>

Параметр enctype=»multipart/form-data» обязателен для такой формы. Тег <input type=»file» name=»picture»> отвечает за поле для ввода имени файла, который загружается на сервер.

Также нам потребуется обработчик события – загрузки файла. Вначале у нас будет одна настройка – путь сохранения изображения. Можно указывать как прямой, так и относительный путь. В случае POST запроса обработчик попробует осуществить загрузку файла по указанному пути. Скрипт сообщит о результате загрузки – удачна она или нет.

PHP

<?php

$path = ‘i/’;

if ($_SERVER == ‘POST’) { if (!@copy($_FILES, $path . $_FILES)) echo ‘Что-то пошло не так’; else echo ‘Загрузка удачна’; }

?>

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php  

$path=’i/’;

if($_SERVER’REQUEST_METHOD’==’POST’)

{

if(!@copy($_FILES’picture»tmp_name’,$path.$_FILES’picture»name’))

echo’Что-то пошло не так’;

else

echo’Загрузка удачна’;

}   ?>

Функция copy, как вы наверно догадались, отвечает за копирование файла из одного место в другое. Мы копируем файл из временной папки сервера в нужную, сохранив имя файла.

Договоримся, что и форма и её обработчик будут находиться в одном файле – upload.php.

Итого имеем простой, но рабочий скрипт. Его можно забросить на хостинг, создать папку i и потренироваться с загрузкой файлов.

PHP

<?php

// Путь загрузки $path = ‘i/’;

// Обработка запроса if ($_SERVER == ‘POST’) { // Загрузка файла и вывод сообщения if (!@copy($_FILES, $path . $_FILES)) echo ‘Что-то пошло не так’; else echo ‘Загрузка удачна’; }

?> <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <title>Загрузка изображения с изменением размеров</title> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> </head> <body> <h1>Загрузка изображения с изменением размеров</h1> <form method=»post» enctype=»multipart/form-data»> <input type=»file» name=»picture»> <input type=»submit» value=»Загрузить»> </form> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?php   // Путь загрузки

$path=’i/’;

  // Обработка запроса

if($_SERVER’REQUEST_METHOD’==’POST’)

{

// Загрузка файла и вывод сообщения

if(!@copy($_FILES’picture»tmp_name’,$path.$_FILES’picture»name’))

echo’Что-то пошло не так’;

else

echo’Загрузка удачна’;

}   ?>

<!DOCTYPE HTML PUBLIC»-//W3C//DTD HTML 4.01//EN»»http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<title>Загрузкаизображениясизменениемразмеров<title>

<meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″>

<head>

<body>

<h1>Загрузкаизображениясизменениемразмеров<h1>

<form method=»post»enctype=»multipart/form-data»>

<input type=»file»name=»picture»>

<input type=»submit»value=»Загрузить»>

<form>

<body>

<html>

Resize


To scale an image, in this case to half it’s size (scaling is percentage based):

$image = new ImageResize('image.jpg');
$image->scale(50);
$image->save('image2.jpg')

To resize an image according to one dimension (keeping aspect ratio):

$image = new ImageResize('image.jpg');
$image->resizeToHeight(500);
$image->save('image2.jpg');

$image = new ImageResize('image.jpg');
$image->resizeToWidth(300);
$image->save('image2.jpg');

To resize an image according to a given measure regardingless its orientation (keeping aspect ratio):

$image = new ImageResize('image.jpg');
$image->resizeToLongSide(500);
$image->save('image2.jpg');

$image = new ImageResize('image.jpg');
$image->resizeToShortSide(300);
$image->save('image2.jpg');

To resize an image to best fit a given set of dimensions (keeping aspet ratio):

$image = new ImageResize('image.jpg');
$image->resizeToBestFit(500, 300);
$image->save('image2.jpg');

All resize functions have option which is set to false by default. You can enable by passing to any resize function:

$image = new ImageResize('image.jpg');
$image->resize(500, 300, $allow_enlarge = True);
$image->save('image2.jpg');

If you are happy to handle aspect ratios yourself, you can resize directly:

$image = new ImageResize('image.jpg');
$image->resize(800, 600);
$image->save('image2.jpg');

This will cause your image to skew if you do not use the same width/height ratio as the source image.

Step 11 Save the Image

We’re getting there; almost done. It’s now time to save the image. We pass in the path, and the image quality we would like ranging from 0-100, 100 being the best, and call the appropriate method. A couple of things to note about the image quality: JPG uses a scale of 0-100, 100 being the best. GIF images don’t have an image quality setting. PNG’s do, but they use the scale 0-9, 0 being the best. This isn’t good as we can’t expect ourselves to remember this every time we want to save an image. We do a bit of magic to standardize everything.

Now is also a good time to destroy our image resource to free up some memory. If you were to use this in production, it might also be a good idea to capture and return the result of the saved image.

Usage

This is the default way to use the package:

use Spatie\ImageOptimizer\OptimizerChainFactory;

$optimizerChain = OptimizerChainFactory::create();

$optimizerChain->optimize($pathToImage);

The image at will be overwritten by an optimized version which should be smaller.

The package will automatically detect which optimization binaries are installed on your system and use them.

To keep the original image, you can pass through a second argument:

use Spatie\ImageOptimizer\OptimizerChainFactory;

$optimizerChain = OptimizerChainFactory::create();

$optimizerChain->optimize($pathToImage, $pathToOutput);

In that example the package won’t touch and write an optimized version to .

Setting a timeout

You can set the maximum of time in seconds that each individual optimizer in a chain can use by calling :

$optimizerChain
    ->setTimeout(10)
    ->optimize($pathToImage);

In this example each optimizer in the chain will get a maximum 10 seconds to do it’s job.

Creating your own optimization chains

If you want to customize the chain of optimizers you can do so by adding s manually to an .

Here’s an example where we only want and to be used:

use Spatie\ImageOptimizer\OptimizerChain;
use Spatie\ImageOptimizer\Optimizers\Jpegoptim;
use Spatie\ImageOptimizer\Optimizers\Pngquant;

$optimizerChain = (new OptimizerChain)
   ->addOptimizer(new Jpegoptim())

   ->addOptimizer(new Pngquant())

Notice that you can pass the options an should use to its constructor.

Writing a custom optimizers

Want to use another command line utility to optimize your images? No problem. Just write your own optimizer. An optimizer is any class that implements the interface:

namespace Spatie\ImageOptimizer\Optimizers;

use Spatie\ImageOptimizer\Image;

interface Optimizer
{
    /**
     * Returns the name of the binary to be executed.
     *
     * @return string
     */
    public function binaryName(): string;

    /**
     * Determines if the given image can be handled by the optimizer.
     *
     * @param \Spatie\ImageOptimizer\Image $image
     *
     * @return bool
     */
    public function canHandle(Image $image): bool;

    /**
     * Set the path to the image that should be optimized.
     *
     * @param string $imagePath
     *
     * @return $this
     */
    public function setImagePath(string $imagePath);

    /**
     * Set the options the optimizer should use.
     *
     * @param array $options
     *
     * @return $this
     */
    public function setOptions(array $options = []);

    /**
     * Get the command that should be executed.
     *
     * @return string
     */
    public function getCommand(): string;
}

If you want to view an example implementation take a look at the existing optimizers shipped with this package.

You can easily add your optimizer by using the method on an .

use Spatie\ImageOptimizer\ImageOptimizerFactory;

$optimizerChain = OptimizerChainFactory::create();

$optimizerChain
   ->addOptimizer(new YourCustomOptimizer())
   ->optimize($pathToImage);

Демонстрация масштабирования

Чтобы вам не приходилось лихорадочно менять входные переменные в процессе отладки на локальном сервере, предлагаю демо-страничку, которая загружает четыре картинки разных форматов. Тестовые исходные картинки должны храниться в текущей директории под именами image1.jpg и image2.jpg. Здесь же должен находиться файл resize.php, который на выводе выдаёт jpeg-изображение.

resize.htm

<html>
<head>
 <title></title>
</head>
<body>
 <h3 align="center">Демонстрационный пример масштабирования картинок</h3>
 <table align="center">
   <tr align="center" valign="top">
     <td>90*90<br><img src="resize1.php?f=av.jpg&t=1&w=90&s=0" border=0></td>
     <td>90*90<br><img src="resize.php?f=news114.jpg&type=1" border=0></td>
   </tr>
   <tr align="center" valign="top">
     <td>218*x<br><img src="resize.php?f=av.jpg&type=2" border=0></td>
     <td>218*x<br><img src="resize.php?f=news114.jpg&type=2" border=0></td>
   </tr>
 </table>
</body>
</html>

Resizing and Reassembling

For this step, we should provide a list of details about the source and the target image, that are used in image resize process.  These are,

  • Source and target layer resource id
  • Dimensions for denoting width and height of the original image and target image layer.

Using these details provided, required portion of the original image will be copied and reassembled onto the target layer. For that, PHP function, named as, imagecopyresampled() for such resizing and reassembling process. For example,

imagecopyresampled($target_layer,$image_resource_id,0,0,0,0,$target_width,$target_height, $source_properties,$source_properties);

In this code sample, shown above, some of the arguments of this function are passed with 0 value. These arguments, actually, represents the x, y coordinates of target and source image, respectively.

These arguments will contain values for cropping some portion of the source image. Otherwise, there is no need to mention x,y points, meaning that, the entire image will be cropped to preserve its appearance as it is except its dimensions.

Note: There is an equivalent PHP function imagecopyresized() as like as imagecopyresampled(), whereas, the imagecopyresampled() function creates resized the image with more quality, comparatively.

Filters


You can apply special effects for new image like blur or add banner.

$image = new ImageResize('image.jpg');

// Add blure
$image->addFilter(function ($imageDesc) {
    imagefilter($imageDesc, IMG_FILTER_GAUSSIAN_BLUR);
});

// Add banner on bottom left corner
$image18Plus = 'banner.png'
$image->addFilter(function ($imageDesc) use ($image18Plus) {
    $logo = imagecreatefrompng($image18Plus);
    $logo_width = imagesx($logo);
    $logo_height = imagesy($logo);
    $image_width = imagesx($imageDesc);
    $image_height = imagesy($imageDesc);
    $image_x = $image_width - $logo_width - 10;
    $image_y = $image_height - $logo_height - 10;
    imagecopy($imageDesc, $logo, $image_x, $image_y, , , $logo_width, $logo_height);
});

5. Text Method Reference:

In addition to offering resize functions, the library also allows the writing of text (including an optional bounding box) to the image before or after resizing. Text is defined using the class as follows:

For more information and demos, please check out the directory in the Github repo.

The following is a list of the methods supported for objects:

Set methods:

: Set the text to be rendered.

: Set the URL of a TTF font to be used for the rendered text.Must point to a valid TTF font file — can be remote.

: Set the foreground colour of the text using a valid hex string.

: Set the background colour of the bounding box using a valid hex string.

: Set the % of the background’s opacity.

: Set the padding (in ) of the bounding box.

: Set the position of the text on the image. Accepts physical pixel co-ordinates (as an array indexed by and respectively), or one of the following string values:

  • — centered, top
  • — top right corner
  • — centered, right
  • — bottom right corner
  • — centered, bottom
  • — bottom left corner
  • — centered, left
  • — top left corner
  • — fully centered

: Set the width of the bounding box. Either , or an integer representing a % width of the image. Auto will automatically size the bounding box to fit the content.

: Set the text alignment within the bounding box. Accepts a string containing , or .

Get methods:

: Returns the text to be rendered in a string.

: Gets the URL of the font currently being used. (Default: ).

: Get the current font size used for the text (in Points).

: Get the currently assigned foreground color. (Returns an array of RGB color values).

: Get the background colour currently being used for the text’s bounding box.

: Get the bounding box padding.

: Get the position for the text to be rendered on the original imafe.

: Get the width of the bounding box.

: Get the alignment of the text within the bounding box.

Просмотровщик картинок

Этот скрипт достаточно прост, он всего лишь формирует страницу, ссылки, осуществляет всю навигацию по каталогу картинок. Вся работа по загрузке картинок производится через resize.php. Его можно взять за основу простого веб-альбома.

preview.php

<html> 
<head> 
   <title></title> 
</head> 
<body> 
<?php 

// читаем список jpg-файлов в массив list 
$list = array(); 
if ($dir = opendir('.'))  // успешное открытие текущей директории 
{ 
     // перебираем именя файлов, полученные readdir 
     while (false !== ($file = readdir($dir))) 
     { 
         // отбираем только .jpg, отсекаем ссылки '.' и '..' 
         if ($file != "." && $file != ".." && preg_match("/.jpg/i", $file)) 
         { 
          $list[] = $file; // пишем имя файла в массив 
          $i++;  // счётчик файлов, нужен для определения границ массива 
         } 
     } 
     closedir($dir); // закрываем директорию 
} 

// переменные по умолчанию, полученные через GET 
if ($f == '')    $f = $list; // если файл не указан, берём первый из списка 
if ($num == '')  $num = 0;    // номер запрошенного файла 
if ($type == '') $type = 1;  // тип по умолчанию "средний" 

// заголовочек - имя файла 
echo "<p>$list</p>\n"; 

// определяем ссылку с картинки анализируя type 
// щёлкая по картинке файл будет перезагружаться с новым type 
if ($type == 0) $link = "href=\"?type=1&num=$num\" title=\"показать 90\""; 
if ($type == 1) $link = "href=\"?type=2&num=$num\" title=\"показать 218\""; 
if ($type == 2) $link = "href=\"?type=full&num=$num\" title=\"показать весь\""; 
if ($type == "full") $link = "href=\"?type=0&num=$num\" title=\"показать 70\""; 
echo "<a $link><img src=\"resize.php?f=$list&type=$type\" border=0></a>"; 

// определяем, крайние ли элементы списка 
$num1 = $num-1; 
if ($num1<0)    $num1 = $i-1;    // если num вышел за 0, переводим его на 0 
$num2 = $num+1; 
if ($num2>$i-1) $num2 = 0; // если num вышел за i, переводим его на i-1 

// ссылки навигации 
echo "<br><a href=\"?type=$type&num=$num1\">пред</a> 
<a href=\"?type=$type&num=$num2\">след</a>"; 

?> 
</body> 
</html>

Думаю, что скрипт достаточно хорошо комментирован, потому объясню лишь суть. Вначале происходит загрузка имён jpg-файлов в текущем каталоге в массив $list. Потом загружаем картинку с нужными параметрами из скрипта resize.php, причём на картинке «висит» ссылка на её увеличенную копию (изменяется параметр $type). В конце формируем ссылки на следующую и предыдущую картинку. Вот и всё. В качестве тестирования накидайте в каталог скрипта два десятка фотографий и вы получите простенькую «смотрелку». Навигацию, конечно, можно усложнить, но тогда скрипт уже будет «сложненьким».

Example: PHP Image Resize

This example shows how to resize any type of image file uploaded from an HTML form. So, the PHP script is shown below handles the uploaded image file to be resized.

<?php
if(isset($_POST)) {
if(is_array($_FILES)) {
$file = $_FILES; 
$source_properties = getimagesize($file);
$image_type = $source_properties; 
if( $image_type == IMAGETYPE_JPEG ) {   
$image_resource_id = imagecreatefromjpeg($file);  
$target_layer = fn_resize($image_resource_id,$source_properties,$source_properties);
imagejpeg($target_layer,$_FILES . "_thump.jpg");
}
elseif( $image_type == IMAGETYPE_GIF )  {  
$image_resource_id = imagecreatefromgif($file);
$target_layer = fn_resize($image_resource_id,$source_properties,$source_properties);
imagegif($target_layer,$_FILES . "_thump.gif");
}
elseif( $image_type == IMAGETYPE_PNG ) {
$image_resource_id = imagecreatefrompng($file); 
$target_layer = fn_resize($image_resource_id,$source_properties,$source_properties);
imagepng($target_layer,$_FILES . "_thump.png");
}
}
}
function fn_resize($image_resource_id,$width,$height) {
$target_width =200;
$target_height =200;
$target_layer=imagecreatetruecolor($target_width,$target_height);
imagecopyresampled($target_layer,$image_resource_id,0,0,0,0,$target_width,$target_height, $width,$height);
return $target_layer;
}
?>

And the HTML code which includes the form container to upload image file is,

<form name="frmImageResize" action="" method="post" enctype="multipart/form-data">
<input type="file" name="myImage" /> 
<input type="submit" name="submit" value="Submit" />
</form>

Как изменить размер изображений в Битриксе или выполнить ресайз

Перед тем как создать проект или новый инфоблок, всегда думайте «какого размера должны быть мои изображения«

Это очень важно, т.к. если вы не настроите в информационном блоке уменьшение картинки после загрузки, генерацию картинки анонса из детальной (если нужно) и прочие параметры, то размер вашей страницы может превышать несколько мегабайт (а в очень редких случаях даже больше 10 мб )

На самом деле, когда вы строго задаете размеры изображению, используя CSS, картинка все равно грузится в полном размере, и такие вещи не прокатят:

//HTML
<img src=".." width="200" height="200">
<img src=".." style="width: 200px; height: 200px;">

//CSS
.my-prev-image {
  width: 200px;
  height: 200px;
}

Это не решит нашу проблему с размером исходного изображения на странице, и единственные допустимые правила, на мой взгляд, могут быть max-width и max-height.

Рассмотрим случай, когда у нас уже есть большие картинки и мы хотим получить их уменьшенные копии. Нам поможет метод CFile::ResizeImageGet. Его преимущество в том, что когда мы запускаем страницу, он создает картинки в папке /upload/resize_cache/путь — и если такая картинка уже есть, он автоматически вернет нам путь к ней. Кроме того, мы можем задавать любой размер, качество и даже вид масштабирования изображений.

Вот какие типы нам доступны (информация взята из официальной документации Битрикс):

  • BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее;
  • BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize;
  • BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.

Давайте попробуем уменьшить наши картинки используя ResizeImageGet:

<?require($_SERVER."/bitrix/header.php");?>

<?
if (CModule::IncludeModule("iblock")):

	$iblock_id = 1;
	$my_elements = CIBlockElement::GetList (
		Array("ID" => "ASC"),
		Array("IBLOCK_ID" => $iblock_id),
		false,
		false,
		Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DETAIL_PICTURE')
	);

	while($ar_fields = $my_elements->GetNext())
	{
		//echo $ar_fields." <br>";
		//$img_path = CFile::GetPath($ar_fields);
		$img_resize_path = CFile::ResizeImageGet(
			$ar_fields,
			array('width'=>'100', 'height'=>'150'),
			BX_RESIZE_IMAGE_PROPORTIONAL
		);
		//echo "<pre>";print_r($img_resize_path);echo "</pre>";
		echo "<img src='".$img_resize_path."' alt=''><br>";
	}

endif;
?>

<?require($_SERVER."/bitrix/footer.php");?>

$img_resize_path — надеюсь вы заметили что этот метод возвращает нам массив, и нам нужен только src.

Разберем по порядку:

$ar_fields — поле для кода файла (для детальной меняем на $ar_fields),

array(‘width’=>’100′, ‘height’=>’150′) — размеры итогового изображения (или вышеупомянутый arSize),

BX_RESIZE_IMAGE_PROPORTIONAL — тип масштабирования, про котором наши изображения не будут вылазить за указанные границы.

В официальной документации этого метода есть подробное описание, кроме того, там описываются остальные 4 параметра, которые мы тут не использовали (InitSizes, Filters, Immediate, jpgQuality).

Premium Image Resizing Scripts

Before we get into the step-by-step process, let’s look at a few premium options from CodeCanyon. There are dozens of image resizing scripts and plugins to choose from—here’s a quick look at some of them.

1. Image Resizer And Thumbnail Creator

This is a simple PHP class that resize images on the fly. If you are using any PHP-enabled webserver, and have any kind of image viewer, this script is ideal for you. It always retains the aspect ratio, so the resized image keeps its form.

Image Resizer And Thumbnail Creator

2. anySize — Caching image resizer

anySize is a lightweight, drop-in, fully automated, caching, make-you-coffee-and-serve-it-in-bed script that lets you request and generate images (jpg, gif or png) of any size.

anySize — Caching image resizer

3. Magento Image Resize

This Magento plugin allows you to set the maximum image width and height that can be uploaded for the catalog image. It also reduces the file size of the catalog image. It will help you reduce your disk space usage as the images will be resized and compressed.

Magento Image Resize

This PHP Class helps you to resize any photos and make your personal watermark.

Image Resizer And Watermark Maker

5. RezImage — Easy Bulk Image Resizing

RezImage is a simple and flexible bulk image resizing tool, perfect for web designers or online shop owners. This tool allows you to resize an entire folder full of images, no matter how many there are—just load the folder with the images, set the width and height and nothing more. Includes some resolution presets like VGA, HD, QXGA, QSXGA, etc… but you can also set your own.

RezImage — Easy Bulk Image Resizing


С этим читают