jcrop을 통해 생성 된 이미지의 잘린 영역을 표시하는 방법은 무엇입니까?

Question

jcrop을 사용하여 내 사이트에서 이미지 자르기를 구현하고 있습니다.

"작물을 확인"을 클릭하면, 나는 표시 영역이 새로 자른 이미지로 대체 될 것으로 예상한다. 다음과 같이

내 코드는 다음과 같습니다

//jquery method to display cropped image 
coords_w = @options.media.get('crop_w') 
coords_h = @options.media.get('crop_h') 
coords_x = @options.media.get('crop_x') 
coords_y = @options.media.get('crop_y') 

img = new Image() 
img.onload =() => 
    attachImage =() => 
    rx = img.width/coords_w 
    ry = img.height/coords_h 

    @$('.media_preview_display .image_holder').find('img').attr('src', @options.media.get('image_url')) 
    @$('.media_preview_display .image_holder').find('img').css 
     width: Math.round(rx * img.width) + 'px' 
     height: Math.round(ry * img.height) + 'px' 
     marginLeft: '-' + Math.round(rx * coords_x) + 'px' 
     marginTop: '-' + Math.round(ry * coords_y) + 'px' 

img.src = @options.media.get('image_url') 

그것은 현재 자른 이미지를 제대로 표시 아니에요. 단지 자른 영역이 표시되도록 내 코드를 수정할 수있는 방법

//haml file 
.section.media_preview_display.align_center 
    .image_holder 
    %img.jcrop{src: "<%= generic_object.image_url %>"} 

Answer 1

Jcrop 실제로 작물을하지 않습니다 (내 코드에서 볼 수 있듯이, 나는 X, Y 축과 높이와 자른 숙독의 폭) 이미지. jcrop에서 얻은 매개 변수를 사용하여 실제 자르기를 처리하려면 서버 측에 뭔가가 필요합니다.

CSS 위치 및 크기가 오버플로 : 숨김으로 멋지게 나타날 수 있습니다.