Preview and Resize pictures on the fly

I reworked the site for the customer on Netcat and was surprised to find that someone else uses the download of separate images for originals and for thumbnails and, as a result, separate columns in the database table. Where it was not going to create thumbnails on the server side after loading the original.

The idea is simple and not new. With this approach, I first encountered in UMI-CMS, and used it in RubyOnRails. The point is that previews are created only when they are needed and of any size, and only the name of the original is stored in the database.

If you need to display a preview of a picture, you call a function like:

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

where the second and the third parameter is the desired size in pixels (auto means auto-fit to the scale).
')
The view_thumbs method checks in the folder (for example, "/ images / cache") the presence of the file originals_name_file_100xauto.jpg. If it finds, it returns the string “originals_name_file_100xauto.jpg”, if it does not find it, it creates a file of the required size on the fly and returns the same.

The advantages of the approach are obvious:

1. There is no garbage in the form of a large number of thumbnails on the disk. All previews are stored in one “cache” folder and can be periodically deleted to free up space.
2. Unlimited number of thumbnails of different sizes. It is enough to set the necessary parameters in the method.

For cakePHP there is a helper images.php which can be pulled out of Bakesale (there is no automatic fitting). Below is a method on RubyOnRails that implements this approach.

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 # All the salt is here. If there is no necessary thumbs, then after reading the error falls out, which we save. If everything is ok, then the code is not executed further.
    
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

Practice shows that specifying only one size in a method with automatic fitting of another is not enough. If you limit only to the width, then the picture will certainly fall too high and the whole layout can move out. The same with height. And in the above code, if you specify both the height and width of the resize will be without saving the scale. Below is a piece of code on php that implements a resize with constraint in both height and width while preserving the scale.

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. }

______________________

The text was prepared in the Habr Editor from © SoftCoder.ru