miniMagic-Jcrop

Storage modeli üzerindeki resimleri kırpma işlemini yapalım:

storage_controller.rb  create ve update sayfasını güncelleyelim. storage verisi kaydedildiğinde, resim bilgisdi bulunuyorsa crop sayfasına yönlendirelim.

  def create
    @storage = Storage.new(storage_params)
      if @storage.save
          if storage_params[:picture].present?
              render :crop
        else      
            redirect_to storage_path
        end
      else
         render :new
      end
  end
  def update
      if @storage.update(storage_params)
          if storage_params[:picture].present?
              render :crop
        else
          redirect_to storages_path
        end
      else
        render :edit
      end
  end
view/storage/crop.html.erb sayfası oluşturup düzenleyelim

<h1> Resim Kırp</h1>

<%= image_tag(@storage.picture) %>

resim eklendiğinde yada güncellendiğinde bu sayfaya geliyor:

jcrop: http://deepliquid.com/content/Jcrop.html

buradan jcrobu indirip rails içerisindeki vendor klasörü altına alıyoruz

gerekli dosyaları aşağıdaki şekilde yerleştirelim:

app/asset/javascript/applicatiopn .js  düzenleyelim

//= require jquery
//= require jquery_ujs
//= require jquery.Jcrop
//= require turbolinks
//= require_tree .

app/asset/stylesheet/applicatiopn .css  düzenleyelim

 *=require jquery.Jcrop
 *= require_self
 *= require_tree .



view/storages/crop.html.erb düzenleyelim

 <%= image_tag(@storage.picture ,id: "cropbox" ) %>

    <script type="text/javascript" charset="utf-8">
        $(function() {
          $('#cropbox').Jcrop();
        });

Gelelim Kırpma işlemine ;

ilk öncelikle secili alanın kordinatlarını alalım:

crop.html.erb sayfasını yeniden düzenleyelim:

<h1> Resim Kırp</h1>
<%= image_tag(@storage.picture ,id: "cropbox" ) %>


<%= form_for(@storage) do |f| %>
   <%= f.text_field  :crop_x  ,:id=>"cx"%> <br>
   <%= f.text_field  :crop_y  ,:id=>"cy"%> <br>
   <%= f.text_field  :crop_w  ,:id=>"cw"%> <br>
   <%= f.text_field  :crop_h ,:id=>"ch"%> <br>
  <div class="actions">
   <%= f.submit "Crop"%>
  </div>
<% end %>


    <script type="text/javascript" charset="utf-8">
        $(function() {
          $('#cropbox').Jcrop({
            onChange: update_crop,
            onSelect: update_crop,
          });
        });

        function update_crop(coords) {
            document.getElementById("cx").value=coords.x
            document.getElementById("cy").value=coords.y
            document.getElementById("cw").value=coords.w
            document.getElementById("ch").value=coords.h    
        }
    </script>
storages.rb modeline;

  attr_accessor :crop_x, :crop_y, :crop_w, :crop_h

gemfile:

gem "mini_magick"
$ bundle

storage_controller.rb

  def crop
      binding.pry
      @coor=params[:storage]
      @storage=Storage.find(params[:id])
           binding.pry
       image = MiniMagick::Image.open(@storage.picture.path)
    crop_params = "#{@coor[:crop_w]}x#{@coor[:crop_h]}+#{@coor[:crop_x]}+#{@coor[:crop_y]}"
    image.crop(crop_params)
          @storage.picture=image
          @storage.save
          redirect_to storages_path

  end

routes:

 resources :storages do
      post 'crop', on: :member
  end

crop.html.erb

<%= form_for @storage, :url => crop_storage_path(@storage), :html => {:method => :post} do |f| %>
   <%= f.text_field  :crop_x  ,:id=>"cx"%> <br>
   <%= f.text_field  :crop_y  ,:id=>"cy"%> <br>
   <%= f.text_field  :crop_w  ,:id=>"cw"%> <br>
   <%= f.text_field  :crop_h ,:id=>"ch"%> <br>
  <div class="actions">
   <%= f.submit "Crop"%>
  </div>
<% end %>

çalıştırıp bakalım:

 

Resim kırpma işlemi bu kadar :D

uygulama burada..