0

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 %>"}
4

1 に答える 1

3

Jcropは実際には画像をトリミングしません。jcropから取得したパラメータを使用して実際のトリミングを処理するには、サーバー側が必要です。

あなたはoverflow：hiddenでcssの位置とサイズに夢中になる可能性があります。

于 2012-06-25T13:20:11.483 に答える