title: How to display cropped region of image created via jcrop?
body: <p>I am using jcrop to implement image cropping in my site.</p>
  
  <p><img src="https://i.stack.imgur.com/A1hhk.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/oBRw2.png" alt="enter image description here"></p>
  
  <p>After clicking on "confirm crop", I would expect the display area to be replaced by the newly cropped image.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>//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 = () =&gt;
    attachImage = () =&gt;
      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')
  </code></pre>
  
  <p>It's currently not displaying the cropped image correctly. How can I modify my code so that only the cropped region is displayed (as seen in my code, I have the x, y axis and height and width of the cropped aread)</p>
  
  <pre><code>//haml file
  .section.media_preview_display.align_center
    .image_holder
      %img.jcrop{src: "&lt;%= generic_object.image_url %&gt;"}
  </code></pre>