Превью и Resize картинок на лету

Переделывал сайт заказчику на Netcat и с удивлением обнаружил, что кто-то ещё использует загрузку отдельных картинок для оригиналов и для превьюшек и как следствие отдельные столбцы в таблице БД. Куда ещё не шло создавать превьюшки на стороне сервера после загрузки оригинала.

Идея простая и не новая. C таким подходом я в первые столкнулся в UMI-CMS, а использовал в RubyOnRails. Смысл в том, что превью создаются только когда они нужны и какого угодно размера, а В БД храниться только название оригинала.

Если Вам необходимо вывести превью картинки вы вызываете функцию типа:

1. @thumbs = Photo.view_thumbs('originals_name_file.jpg', '100', 'auto')

где второй и третий параметр это нужный размер в пикселах (auto значит автоматическая подгонка под массштаб).

Метод view_thumbs проверяет в папке (например "/images/cache") наличие файла originals_name_file_100xauto.jpg. Если находит то возвращает строку «originals_name_file_100xauto.jpg», если не находит, то создаёт файл нужных размеров на лету и возвращает то же самое.

Достоинства подхода очевидны:

1. Не создаётся мусора в виде большого количества превьюшек на диске. Все превью храняться в одной папке «cache» и могут периодически удаляться для освобождения места.
2. Неограниченное количество превьюшек разных размеров. Достаточно только задать нужные параметры в методе.

Для cakePHP есть хелпер images.php который можно выдернуть из Bakesale (автоматической подгонки нет). Ниже представлен метод на RubyOnRails реализующий данный подход.

1. require 'RMagick'
   
2. 
   
3. class Photo < ActiveRecord::Base
   
4.  
   
5.   def self.view_thumbs(image, width = 'auto', height = 'auto')
   
6.         img_arr = image.split(".")
   
7.     img, img_type = img_arr[0], img_arr[1]
   
8.  
   
9.     img_thumbs = "#{img}_#{width}x#{height}"
   
10.     img_main_dir = "#{RAILS_ROOT}/public/images/"
    
11.     img_thumbs_dir = "#{RAILS_ROOT}/public/images/cache/"
    
12. 
    
13.     begin
    
14.       img_thumbs = Magick::Image.read("#{img_thumbs_dir}/#{img_thumbs}.#{img_type}")
    
15.     rescue Magick::ImageMagickError  # Вся соль тут. Если нет нужного тхумбса, то после чтения вываливается ошибка, которую мы спасаем. Если всё нормально, то код далее не выполняется
    
16.       img_orig = Magick::Image.read("#{img_main_dir}/#{image}").first
    
17.       img_size = {:main =>{:cols => img_orig.columns,:rows => img_orig.rows},
    
18.         :thumb =>{:cols =>0.0, :rows =>0.0}
    
19.       }
    
20.       if 'auto' == width and 'auto' == height
    
21.         img_size[:thumb][:rows] = img_size[:main][:rows]
    
22.         img_size[:thumb][:cols] = img_size[:main][:cols]
    
23.       end
    
24.       if 'auto' != width and 'auto' == height
    
25.         img_size[:thumb][:rows] = ((width.to_f/img_size[:main][:cols])*img_size[:main][:rows]).to_i
    
26.         img_size[:thumb][:cols] = width.to_i
    
27.       end
    
28.       if 'auto' == width and 'auto' != height
    
29.         img_size[:thumb][:rows] = height.to_i
    
30.         img_size[:thumb][:cols] = ((height.to_f/img_size[:main][:rows])*img_size[:main][:cols]).to_i
    
31.       end
    
32.       if 'auto' != width and 'auto' != height
    
33.         img_size[:thumb][:rows] = height.to_i  
    
34.         img_size[:thumb][:cols] = width.to_i        
    
35.       end
    
36. 
    
37.       img_new = img_orig.resize!(img_size[:thumb][:cols].to_i, img_size[:thumb][:rows].to_i)
    
38.       img_new.write "#{img_thumbs_dir}/#{img_thumbs}.#{img_type}"
    
39.     end
    
40.     img_thumbs = x
    
41.     return "#{img_thumbs}.#{img_type}"
    
42.   end
    
43. end

Практика показывает, что указывание только одного размера в методе с автоматическим подгоном другого недостаточно. Если вы ограничиваете только по ширине, то обязательно попадётся картинка слишком высокая и вся вёрстка может съехать. То же самое с высотой. А в приведённом выше коде при указании одновременно и высоты и ширины ресайз будет без сохранения масштаба. Ниже приведён кусок кода на php, который реализует ресайз с ограничением и по высоте и по ширине с сохранением массштаба.

1. $img_size = array(
   
2.                         'main'=>array('width'=>imagesx($img_src), 'height'=>imagesy($img_src)),
   
3.                         'thumb'=>array('width'=>0, 'height'=>0)
   
4.                 );
   
5.                
   
6.                 if ('auto' == $width && 'auto' == $height) {
   
7.                         $img_size['thumb']['height'] =(int) $img_size['main']['height'];
   
8.                         $img_size['thumb']['width'] =(int) $img_size['main']['width'];
   
9.                 }
   
10.                 else if ('auto' != $width && 'auto' == $height) {
    
11.                         $img_size['thumb']['width'] = (($img_size['main']['width'] <= $width) ? $img_size['main']['width'] : $width);
    
12.                         $img_size['thumb']['height'] = (int) round(($img_size['thumb']['width']/$img_size['main']['width'])*$img_size['main']['height']);
    
13.                 }
    
14.                 else if ('auto' == $width && 'auto' != $height) {
    
15.                         $img_size['thumb']['height'] = (($img_size['main']['height'] <= $height) ? $img_size['main']['height'] : $height);
    
16.                         $img_size['thumb']['width'] = (int) round(($height/$img_size['main']['height'])*$img_size['main']['width']);
    
17.                 }
    
18.                 else if ('auto' != $width && 'auto' != $height) {
    
19.                         $img_size['thumb']['height'] = (($img_size['main']['height'] <= $height) ? $img_size['main']['height'] : $height);
    
20.                         $img_size['thumb']['width'] = (($img_size['main']['width'] <= $width) ? $img_size['main']['width'] : $width);
    
21.                         $Kt = $img_size['thumb']['height']/$img_size['thumb']['width'];//5/1
    
22.                         $Km = $img_size['main']['height']/$img_size['main']['width'];//5/1
    
23. 
    
24.                         if ($Kt > $Km){
    
25.                                 $img_size['thumb']['height'] = $img_size['thumb']['width']*$Km;
    
26.                         }
    
27.                         else if ($Kt < $Km) {
    
28.                                 $img_size['thumb']['width'] = $img_size['thumb']['height']/$Km;
    
29.                         }
    
30.                 }

______________________

Текст подготовлен в Хабра Редакторе от © SoftCoder.ru