resim üzerine işaretleme

Bir önceki çalışmada resimi fare ile seçip kırma işlemini yaptık. burda ise fare ile seçili alanın kordinatlarını veritabanına kaydedip, daha sonra seçili alanı göster dediğimzde canvas ile resimde işaretli alanı gösterme işlemini yapacağız.

KIrma işlemine kadar olan kısım önceki yazıyla aynı o kısımdan sonrasını burdan devam edelim. Storage modelimize x,y,w,h attribute alanlarını oluşturalım.

rails generate migration AddCxToStorages cx:floatrails generate migration AddCyToStorages cy:float
rails generate migration AddCwToStorages cw:float
rails generate migration AddChToStorages ch:float
$rake db:migrate

storage_controller.rb de choose adlı method acalım:

    def choose
    @storage=Storage.find(params[:id])
  end
  def choose_save

  end
  def choose_show

  end


routes.rb

  resources :storages do
      post 'crop', on: :member
      get 'choose', on: :member
      post 'choose_save', on: :member
      get 'choose_show', on: :member
  end

index.html.erb

          <td><%= link_to 'işaretli resim', choose_show_storage_path(storage) %></td>
         <td><%= link_to 'işaretle', choose_storage_path(storage) %></td>




choose.html.erb sayfası oluşturalım:

<%= form_for @storage, :url => choose_save_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 "Kaydet"%>
  </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>

Kaydet butonuna tıklandiğinda choose_save actionuna gidecek controllara gecip düzenleyelim:

storage_controller.rb

  def choose_save
      @storage=Storage.find(params[:id])
      @coor=params[:storage]
      @storage.cx=@coor[:crop_x]
      @storage.cy=@coor[:crop_y]
      @storage.cw=@coor[:crop_w]
      @storage.ch=@coor[:crop_h]
      @storage.save
      redirect_to storages_path
  end

Kayıt başarılı gelelim göstermeye,

terminal:
sudo apt-get install libmagickwand-dev

gemfile:

gem 'rmagick'
picture_uploader.rb

include CarrierWave::RMagick



storage_controller.rb

     @storage=Storage.find(params[:id])
     img = Magick::Image::read(@storage.picture.path).first
     @width=img.columns
     @height=img.rows

choose_show.html.erb

<h4>İşaretli resim:</h4><br/>

<canvas id="myCanvas" width="<%=@width%>" height="<%=@height%>" style="background-image:url('<%=@storage.picture_url%>');">

</canvas>

<%=form_for @storage do |f|%>
    <%=f.text_field :cx ,:id=>"cx"%><br>
  <%=f.text_field :cy ,:id=>"cy"%><br>
  <%=f.text_field :cw ,:id=>"cw"%><br>
  <%=f.text_field :ch ,:id=>"ch"%><br>
<% end %>

<script type="text/javascript">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(document.getElementById("cx").value, document.getElementById("cy").value, document.getElementById("cw").value, document.getElementById("ch").value);

      context.lineWidth = 2;
      context.strokeStyle = 'red';
      context.stroke();
</script>



ÇIKTI:

proje burada..