[Rails]使用carrierwave，在上傳圖片時加上文字浮水印和疊加圖片

在專案中遇到需要上傳圖片需要加上文字浮水印和疊加圖片，這邊整理一下做法。

做法是

1. 先定義處理圖片的方法
2. 使用process引入方法

以下依序介紹文字浮水印和疊加圖片的做法

上傳圖片時加上文字浮水印

接著我們要實作的是上傳圖片時在圖片上加上浮水印。

以下是我們要上傳的圖片

程式碼

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process :add_watermark

  def add_watermark
    watermark = "安安，我是浮水印"

    manipulate! do |image|
      image.combine_options do |c|
        # combine_options讓我們可以同時執行多個指令
        c.gravity 'Center' # 設定位置在正中央
        c.pointsize '30' # 設定文字大小（fontsize）
        c.font "#{Rails.root}/public/microsoft_font.ttf" # 如果要使用中文字體必須要引入字體
        c.draw "text 0,0 '#{watermark}'" # text格式、象限座標（以gravity為準）、文字內容
        c.fill 'white' # 設置字體顏色
      end
      image
    end
  end
end

上傳圖片時疊加圖片

我們等等要上傳的圖片

待會要疊加上去的圖片

程式碼

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process :composite_image
  
  def composite_image
    second_image = MiniMagick::Image.open "https://i.imgur.com/icSmjSF.png"
    # 預先讀取某張圖片

    manipulate! do |first_image|
      # manipulate讓我們可以針對上傳的圖片執行特定行為
      first_image.composite(second_image) do |c|
        # 使用composite這個method可以複合兩張圖片
        c.compose "Over" # 將第二張照片疊在第一張照片「上方」
        c.geometry "+0+0" # 將第二張圖片從(0, 0)的位置開始蓋上
      end
    end
  end
end

這樣我們就可以在上傳的圖片上疊上另外一張圖片浮水印。
疊加後的結果（此圖片經過resize處理過）：

參考資料

manipulate!
composite
combine_options
使用 CarrierWave 和 MiniMagick 合成多张图片、写文字
用ImageMagick在图片中写中文的问题及解决