RefineryCMSの画像に透かしを追加する

サイト上の画像に透かしを入れるというタスクが頻繁に発生します。 通常、ほとんどの開発者は問題を認識していません(多くのPHP CMSがこれを箱から取り出します)が、RailsとRefineryCMSエンジンの世界では、事態はそれほどスムーズではありません。

製油所はDragonfly (Rackに基づいて画像を処理し、その場で画像を処理するための特別な宝石)を使用しており、いくつかの困難があります。



猫の下で、RefineryCMSのメイン画像に透かしを入れた画像のオーバーレイを使用して、画像に透かしを作成する方法を説明します。





もちろん、透明な背景PNG拡張機能を備えた画像が必要です。 私たちはそれを透かし.pngと呼び、プロジェクトのpublic /ディレクトリに配置します。



次に、記号を重複させる方法について説明します。 Dragonflyは、イメージプロセッサを強力にサポートしています。 処理の基本はドキュメントに記載されています



それでは、透かしを重ね合わせる画像処理用の独自のクラスを作成しましょう。



class ImageProcessor def watermark(temp_object) tempfile = new_tempfile args = " -dissolve 50% -gravity south #{Rails.root}/public/watermark.png #{temp_object.path} #{tempfile.path}" full_command = "composite #{args}" result = `#{full_command}` tempfile end private def new_tempfile(ext=nil) tempfile = ext ? Tempfile.new(['dragonfly', ".#{ext}"]) : Tempfile.new('dragonfly') tempfile.binmode tempfile.close tempfile end end
      
      







Dragonflyのプロセッサを作成するための基本的な考え方は、ここから取得されます 。 それでは、コードを解析しましょう。

このクラスには2つのメソッドが含まれています。

new_tempfileメソッドは一時ファイルを作成します-これは「出力」(これはイメージオーバーレイ操作の結果)になり、ImageMagickコマンドで使用されます。

したがって、透かし方法は、透かしを追加する方法です。 ここではすべてが単純です。引数temp_objectはトンボの画像オブジェクトです。 次に、一時ファイルを作成し、ImageMagickからの合成コマンドの引数を書き留めます。これにより、画像オーバーレイが表示されます。 これはシンプルで最適化されていないバージョンなので、watermark.pngファイルへのパスがここにリストされています。 引数:

-dissolve 50%は透明度を追加します。

-重力下の南の配置。

#{Rails.root} /public/watermark.png-透かしファイルへのパス。

#{temp_object.path}-ソースイメージへのパス。

#{tempfile.path}-一時ファイルへのパス。 最終的な「接着」イメージを含むのは後者です。



次に、処理するクラスをアプリケーションに接続する必要があります。 次の内容の別個のconfig / initializer / dragonfly.rbファイルを作成できます。



 app = Dragonfly[:refinery_images] app.processor.register(ImageProcessor)
      
      





最初の行は、RefineryCMSからいわゆる「Dragonflyアプリケーション」を受け取り、2行目はクラスを直接登録します。



これで、次のように使用できます。

 <%= image_tag image.thumbnail('800x600#').process(:watermark).url %>
      
      





私たちの写真はすでに透かし付きで表示されます。 したがって、Dragonflyのプロセスメソッドは、登録されている任意のプロセッサで機能します。



この記事では、RefineryCMSの例を使用して、イメージプロセッサをDragonflyにすばやく簡単に追加する方法を示します。 ImageMagickの他の優れた機能とともに、Refineryなしでこれを使用できます。



All Articles