如何显示通过 jcrop 创建的图像的裁剪区域？

Posted 2023-02-25

【中文标题】如何显示通过 jcrop 创建的图像的裁剪区域？

【英文标题】：How to display cropped region of image created via jcrop?

【发布时间】：2012-06-07 08:36:43

【问题描述】：

我正在使用 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.jcropsrc: "<%= generic_object.image_url %>"

【参考方案1】：

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

你可以通过 overflow:hidden 来获得 css 的位置和大小。

【讨论】：

但是怎么做呢？