如何顯示通過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') 

，目前不能正確顯示裁剪後的圖像。如何修改我的代碼，以便只顯示裁剪的區域（如在我的代碼看到的，我有X，Y軸高度和裁剪的的aread寬度）

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

Answer 1

Jcrop實際上並不作物一個圖像。你需要一些服務器端來使用從jcrop獲得的參數來照顧實際的裁剪。

你可以用css的位置和大小與溢出隱藏。