jquery - 如何显示通过 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 轴和高度和宽度）

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

Answer 1

Jcrop 实际上并不裁剪图像。您需要在服务器端使用从 jcrop 获得的参数来处理实际裁剪。

您可以通过溢出：隐藏来了解 css 位置和大小。