Menambahkan Watermark Dengan gem 'carrierwave'

Watermark (tanda air) adalah sebuah tulisan atau logo yang disematkan pada karya digital maupun manual, misal gambar dan video. Watermark ditujukan untuk mengetahui identitas dari seseorang yang membuat karya tersebut. Watermark bisa berupa tulisan singkat ataupun logo yang berisi informasi lengkap tentang pemilik asli karya tersebut. Bisa juga digunakan sebagai media promosi.

Gems yang akan digunakan :

1. gem 'carrierwave'
2. gem 'mini_magick'

Buat Project Baru 

1. Membuat project baru

   $ rails new Watermark

   $ cd Watermark

2. Edit Gemfile dan tambahkan kode berikut

     gem 'carrierwave'
     gem 'mini_magick'  

   $ bundle install

Membuat CRUD untuk User

1. Buat CRUD untuk User dengan menggunakan fungsi Scaffold

   $ rails generate scaffold User nama:string alamat:string handphone:string

2. Buat database baru lalu migrate untuk generate table User
   

   $ rake db:create

   $ rake db:migrate

   $ rails s 

3. Silahkan cek localhost:3000/users, untuk memastikan kalau CRUD bisa dilakukan

Implementasi Carrierwave 

1. Ketik kode berikut untuk men-generete file uploader nya yang akan disimpan di, app/uploaders/ 
   

   $ rails generate uploader Image

2. Tambahkan field "image" untuk menyimpan gambar yang akan di upload kan ke database, ketik kode berikut
   

   $ rails generate migration AddImageToUsers image:string

3. Edit model User pada app/models/user.rb, tambahkan kode berikut
   

   class User < ApplicationRecord
     mount_uploader :image, ImageUploader
   end 

   $ rake db:migrate

4. Tambahkan permit params untuk field ":image" pada app/controllers/users_controller.rb
   

       # Never trust parameters from the scary internet, only allow the white list through.
       def user_params
         params.require(:user).permit(:nama, :alamat, :handphone, :image)
       end

5. Edit Form view nya pada app/views/users/_form.html.erb, lalu tambahkan kode berikut setelah div :handphone
   

     <div class="field">
       <%= f.label :image %>
       <%= f.file_field :image %>
     </div>

6. Edit Index view pada app/views/index.html.erb, dan tambahkan tag <th> dengan nama "Photo Profil" juga <td> untuk user.image
   

   <th>Photo Profile</th>

   <td><%= user.image %></td> 

7. Edit Show view pada app/views/users/show.html.erb, tambahkan kode berikut setelah tag <p> handphone
   

   <p>
     <strong>Photo Profile:</strong>
     <%= @user.image %>
     <br>
     <%= image_tag @user.image_url.to_s %>
   </p> 

8. Restart server, lalu edit data dan upload kan gambar nya

Resize Gambar

1. Setelah selesai dengan view nya sekarang kita tambahkan kode pada file uploader yang sudah di generate tadi pada app/uploaders/image_uploader.rb, untuk meresize gambar nya

   class ImageUploader < CarrierWave::Uploader::Base
     include CarrierWave::MiniMagick
   
     storage :file
   
     def store_dir
       "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
     end
   
     version :thumb_profile do
       process :resize_to_fill => [370, 229]
     end
   end

2. Untuk melihat perbedaan nya edit lagi Show view pada app/views/users/show.html.erb, dan rubah kode image_tag. Lalu edit lagi data nya dan reupload gambar nya
   

   <p>
     <strong>Photo Profile:</strong>
     <%= @user.image %>
     <br>
     <%= image_tag @user.image_url(:thumb_profile).to_s %>
   </p>

Menambahkan Watermark

1. Siapkan gambar untuk dijadikan watermark pada gambar yang sudah di upload sebelum nya (gambar watermark harus lebih kecil dari gambar yang sudah di upload), lalu simpan gambar nya di folder project Watermark/public 
2. Edit app/uploaders/image_uploader.rb, tambahkan kode berikut
   

   class ImageUploader < CarrierWave::Uploader::Base
     include CarrierWave::MiniMagick
   
     storage :file
   
     def store_dir
       "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
     end
   
     version :thumb_profile do
       process :resize_to_fill => [370, 229]
       process :watermark => "#{Rails.root}/public/chrome.png"
     end
   
     def watermark(path_to_file)
       manipulate! do |img|
         img = img.composite(MiniMagick::Image.open(path_to_file), "jpg") do |c|
           c.gravity "SouthEast"
         end
       end
     end
   end

3. Edit satu data yang sudah kalian buat dan re-upload ulang gambar nya

Untuk dokumentasi gem Carrierwave : Carrierwave
My project source code Watermark
 
Happy Coding! :)