その場で画像をプレビューおよびサイズ変更する

Netcatで顧客にサイトを再編集したところ、他の誰かがオリジナルとプレビューに個別の画像の読み込みを使用しており、その結果、データベーステーブルの個別の列を使用していることに驚きました。 オリジナルをロードした後、サーバー側でまだサムネイルを作成しなかった場所。



アイデアはシンプルで新しいものではありません。 私は最初にこのアプローチにUMI-CMSで出会いましたが、RubyOnRailsでそれを使用しました。 重要なのは、プレビューは必要なときにのみ作成され、任意のサイズであり、元の名前のみがデータベースに保存されるということです。



画像のプレビューを表示する必要がある場合は、次のような関数を呼び出します。

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



ここで、2番目と3番目のパラメーターは、ピクセル単位の目的のサイズです(自動はスケールに合わせて自動調整されることを意味します)。



view_thumbsメソッドは、フォルダー(「/ images / cache」など)でファイルoriginals_name_file_100xauto.jpgの存在をチェックします。 見つかった場合は、文字列「originals_name_file_100xauto.jpg」を返します。見つからない場合は、適切なサイズのファイルをその場で作成し、同じものを返します。



このアプローチの利点は明らかです。

  1. ディスク上に大量のサムネイルの形でゴミが作成されることはありません。 すべてのプレビューは1つのキャッシュフォルダーに保存され、定期的に削除してスペースを解放できます。
  2. さまざまなサイズの無制限のサムネイル。 メソッドに必要なパラメーターを設定するだけで十分です。
cakePHPには、Bakesaleから引き出すことができるimages.phpヘルパーがあります(自動フィッティングはありません)。 以下は、このアプローチを実装するRubyOnRailsメソッドです。



  1. 「RMagick」が 必要



  2. クラス Photo < ActiveRecord :: Base



  3. デフセルフ 。 view_thumbs (画像、幅= 'auto' 、高さ= 'auto' )

  4. img_arr =画像。 分割 ( "。" )

  5. img、img_type = img_arr [ 0 ] 、img_arr [ 1 ]



  6. img_thumbs = "#{img} _#{width} x#{height}"

  7. img_main_dir = "#{RAILS_ROOT} / public / images /"

  8. img_thumbs_dir = "#{RAILS_ROOT} / public / images / cache /"



  9. 始める

  10. img_thumbs = Magick :: Image 。 読み取り ( "#{img_thumbs_dir} /#{img_thumbs}。#{img_type}" )

  11. rescue Magick :: ImageMagickError #すべての塩はここにあります。 必要な親指がない場合は、エラーを読み取った後に抜けてしまい、保存します。 すべてが正常であれば、コードはそれ以上実行されません

  12. img_orig = Magick :: Image read ( "#{img_main_dir} /#{image}" ) 。 最初に

  13. img_size = { :main => { :cols => img_orig。 列 、:行=> img_orig。 行 } 、

  14. :thumb => { :cols => 0.0 、: rows => 0.0 }

  15. }

  16. 'auto' == width および 'auto' == heightの場合

  17. img_size [ :thumb ] [ :rows ] = img_size [ :main ] [ :rows ]

  18. img_size [ :thumb ] [ :cols ] = img_size [ :main ] [ :cols ]

  19. 終わり

  20. if 'auto' != width および 'auto' == height

  21. img_size [ :thumb ] [ :rows ] = ( ( width。to_f / img_size [ :main ] [ :cols ] ) * img_size [ :main ] [ :rows ] ) 。 to_i

  22. img_size [ :thumb ] [ :cols ] =幅。 to_i

  23. 終わり

  24. if 'auto' == width and 'auto' != height

  25. img_size [ :thumb ] [ :rows ] =高さ。 to_i

  26. img_size [ :thumb ] [ :cols ] = ( ( height。to_f / img_size [ :main ] [ :rows ] ) * img_size [ :main ] [ :cols ] ) 。 to_i

  27. 終わり

  28. if 'auto' !=幅および 'auto' !=高さ

  29. img_size [ :thumb ] [ :rows ] =高さ。 to_i

  30. img_size [ :thumb ] [ :cols ] =幅。 to_i

  31. 終わり



  32. img_new = img_orig。 サイズ変更 ! ( img_size [ :thumb ] [ :cols ] 。to_i 、img_size [ :thumb ] [ :rows ] 。to_i )

  33. img_new。 「#{img_thumbs_dir} /#{img_thumbs}。#{img_type}」と 書く

  34. 終わり

  35. img_thumbs = x

  36. return "#{img_thumbs}。#{img_type}"

  37. 終わり

  38. 終わり


練習では、メソッドで1つのサイズのみを指定し、別のサイズを自動的に調整するだけでは十分ではないことが示されています。 幅のみで制限すると、画像が高すぎて、レイアウト全体が移動してしまいます。 高さも同じです。 また、上記のコードでは、高さと幅の両方を指定すると、スケールを保持せずにサイズ変更が行われます。 以下は、マス本社を維持しながら、高さと幅の両方に制限のあるサイズ変更を実装するphpコードです。



  1. $ img_size = array (

  2. 'main' =>配列( 'width' => imagesx ( $ img_src ) 、 'height' => imagesy ( $ img_src ) ) 、

  3. 'thumb' =>配列( 'width' => 0 、 'height' => 0 )

  4. ) ;



  5. if ( 'auto' == $ width && 'auto' == $ height ) {

  6. $ img_size [ 'thumb' ] [ 'height' ] = ( int ) $ img_size [ 'main' ] [ 'height' ] ;

  7. $ img_size [ 'thumb' ] [ 'width' ] = ( int ) $ img_size [ 'main' ] [ 'width' ] ;

  8. }

  9. else if ( 'auto' != $ width && 'auto' == $ height ) {

  10. $ img_size [ 'thumb' ] [ 'width' ] = ( ( $ img_size [ 'main' ] [ 'width' ] <= $ width ) ? $ img_size [ 'main' ] [ 'width' ] : $ width ) ;

  11. $ img_size [ 'thumb' ] [ 'height' ] = ( int ) round ( ( $ img_size [ 'thumb' ] [ 'width' ] / $ img_size [ 'main' ] [ 'width' ] ) * $ img_size [ ' main ' ] [ ' height ' ] )) ;

  12. }

  13. else if ( 'auto' == $ width && 'auto' != $ height ) {

  14. $ img_size [ 'thumb' ] [ 'height' ] = ( ( $ img_size [ 'main' ] [ 'height' ] <= $ height ) ? $ img_size [ 'main' ] [ 'height' ] : $ height ) ;

  15. $ img_size [ 'thumb' ] [ 'width' ] = ( int ) round ( ( $ height / $ img_size [ 'main' ] [ 'height' ] ) * $ img_size [ 'main' ] [ 'width' ] ) ;

  16. }

  17. else if ( 'auto' != $ width && 'auto' != $ height ) {

  18. $ img_size [ 'thumb' ] [ 'height' ] = ( ( $ img_size [ 'main' ] [ 'height' ] <= $ height ) ? $ img_size [ 'main' ] [ 'height' ] : $ height ) ;

  19. $ img_size [ 'thumb' ] [ 'width' ] = ( ( $ img_size [ 'main' ] [ 'width' ] <= $ width ) ? $ img_size [ 'main' ] [ 'width' ] : $ width ) ;

  20. $ Kt = $ img_size [ 'thumb' ] [ 'height' ] / $ img_size [ 'thumb' ] [ 'width' ] ; // 5/1

  21. $ Km = $ img_size [ 'main' ] [ 'height' ] / $ img_size [ 'main' ] [ 'width' ] ; // 5/1



  22. if ( $ Kt > $ Km ) {

  23. $ img_size [ 'thumb' ] [ 'height' ] = $ img_size [ 'thumb' ] [ 'width' ] * $ Km ;

  24. }

  25. else if ( $ Kt < $ Km ) {

  26. $ img_size [ 'thumb' ] [ 'width' ] = $ img_size [ 'thumb' ] [ 'height' ] / $ Km ;

  27. }

  28. }
______________________
テキストは、©SoftCoder.ruのHabr Editorで作成されます。





All Articles