원하는 위치에서 이미지 트림

블로그를 업데이트했습니다.원래 기사는 코코아였어요.
이미지를 투고하도록 하는 서비스에서 사용자가 추천 사이즈 비율이 아닌 이미지를 업로드한 상황에서 좋아하는 위치에서 편집하는 녀석을 고려했다.트위터와 페이스북 표지 사진을 올릴 때 그거예요.이번에는 초점이 변하지 않고 세로 위치만 조정했다.(이미지의width는 100%)
　　
이미지를 잘라서 저장하는 것이 아니라 단순히 이미지 위치를 이동하여 표시 범위 밖으로 보이지 않는 방법을 취합니다.자르면 다른 레이아웃에서 사용할 때도 어려움이 있기 때문에 개인적으로 이 방법을 좋아합니다.
　　

준비

자신이 Rails를 쓰니까 그런 느낌이 들어요.
Gemfile

gem 'jquery-ui-rails'

　　
assets/javascripts/application.js

//= require jquery
//= require jquery.ui.widget
//= require jquery.ui.droppable

　　

사고 방법

레일스 쪽은 그런 느낌이에요.
Post 모형과 Image 모형이 있고, Post에는 축소판 그림 이미지가 있습니다.
(Post belongs to image)
이미지의 위치는 image_pos에서posts표에 저장합니다.
models/post.rb

class Post < ActiveRecord::Base
    belongs_to :image
end

　　
외관의 예는 이렇다.
CSS가 적절합니다. 환경에 따라 변경하십시오.
views/posts/edit.html.erb

    <div class="image_attach">
        <%= f.hidden_field :image_id, id: "thumb", data: { draggable: true } %>
        <%= f.hidden_field :image_pos %>
        <% if post.image.present? %>
            <%= image_tag "http://workabroad.jp/image.jpg", style: "top: #{post.image_pos}%" %>
        <% end %>
    </div>

　　
assets/stylesheets/posts.css.scss

.image_attach {
  height: 300px;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    position: absolute;
    top: 0;
  }
}

　　

Javascript로 구현

사용의 편의를 위해 외부 서류를 만들었다.
assets/javascripts/common.js.coffee

class window.Image

    # Draggable
    @enable_drag: ->
        img = $('.image_attach img')
        box = $('.image_attach')
        pos = $('#post_image_pos')

        $('.image_attach img').draggable({
            axis: "y"
            stop: (event, obj) ->
                # Set position
                range = img.height() - box.outerHeight()
                moved = obj.position.top / box.height() * 100 
                # Top max
                if img.position().top > 0
                    img.css('top', '0px')
                    moved = 0
                # Bottom max
                if Math.abs($(this).position().top) > range
                    img.css('top', '-' + range + 'px')
                    moved = -range / box.height() * 100 

                pos.val(moved)
        })

　　
assets/javascripts/posts.js.coffee

ready = ->
    # Draggable
    if $('#thumb').data('draggable') == true
        Image.enable_drag()

# For turbolinks
$(document).ready(ready)
$(document).on('page:load', ready)

드래그가 끝난 경우에만 (드래그) f.hidden_field :image_pos 값이 변경됩니다.이번에 응답효소를 구상했기 때문에 저장된 값은 px가 아니라% 입니다.
그런 다음 이미지를 View로 표시할 때 image_pos 의 값을 style="top: #{post.image_pos}%" 에 삽입하면 됩니다.
　　
→ http://workabroad.jp/posts/2095