LCL Engineers' Blog

夜行バス比較なび(高速バス比較)・格安移動・バスとりっぷを運営する LCLの開発者ブログ

RailsでPaperclipを利用して、画像に透かし(ウォーターマーク)を付与する

弊社で運営している「バスとりっぷ」というメディアでは、Paperclipを利用して画像のアップロードを行っています。Paperclipでは、サムネイルの作成やリサイズ・背景色の変更などを行っていましたが、透かし(ウォーターマーク)の付与にも対応しました。

www.bushikaku.net

ウォーターマークの付与イメージ

画像に透かし(ウォーターマーク)を付与するには、透かし画像を用意し元画像に重ね合わせます。

f:id:lcl-engineer:20170326200650p:plain

実装方法

paperclipを拡張してもできますが、paperclip-watermarkというgemを利用しました。

GitHub - vikewoods/paperclip-watermark: module PaperclipWatermark

gem 'paperclip-watermark'

paperclipの設定に、以下のようにwatermarkの設定を追加するだけです。これでアップロードしたファイルに、ウォーターマークが付与されます。

class SampleImage < ActiveRecord::Base
  has_attached_file : attachment,
                    :processors => [:watermark],
                    :styles => { 
                            :original => { :watermark_path => "#{Rails.root}/watermark.png",:position => "southwest"}
                     }

paperclipの利用方法については、下記のページを参照ください。

Thumbnail Generation · thoughtbot/paperclip Wiki · GitHub

ウォーターマーク付与位置の変更

ウォーターマークを付与する位置は、positionを指定することで変更できます。

:original => { :watermark_path => "#{Rails.root}/watermark.png",:position => "northwest"}

以下の9種類の位置が指定できるようになってます。

  • northwest 左上
  • north 中央上
  • northeast 右上
  • west 中央左
  • center 中央
  • east 中央右
  • southwest 左下
  • south 中央下
  • southeast 右下

さらに「geometry」を指定すれば、上記の基準位置からピクセル単位で調整できるようです。(未検証)

ウォーターマークを外す

ウォーターマークを付与したくない画像に対して付与してしまった場合など、ウォーターマークを外したい場合もあります。その時は、以下の手順で復元します。

  • ウォーターマーク付与時に、元画像を別名で保存する
  • ウォーターマークを外す場合は、元画像を付与済みの画像に上書きする。

別名保存は、paperclipの指定で簡単にできます。

:styles => { 
                   :original_file_backup => {},
                   :original => {
                         :processors => [:watermark],
                   ・・・
                 }
}

別名で保存した画像が、インターネット上で誰にでもアクセスされてしまうと、結局ウォーターマークが付与されていない画像を取得することが可能になってします。paperclipでは、S3の権限も簡単に制御可能なので、以下のようにアクセス制限を行っています。

:s3_permissions => {:original_file_backup => :private},

既にアップロード済み画像に付与する

既にアップロード済みの画像に対しても、paperclipで再処理することが可能です。処理対象のmodelに対して、reprocessを実行します。

sample_image = SampleImage.find(123)
sample_image.reprocess!

まとめ

実際には、ウォーターマークを付与する・しないを画像によって振り分けているため、細かい判定をロジックを行っています。 その辺は結構手間がかかってますが、ウォーターマークの付与は、paperclip-watermarkを使って簡単に実現できました。