如何显示通过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获得的参数来处理实际裁剪。

你可以通过overflow：hidden来了解css的位置和大小。