title: Jcrop circle selection on reduced large images shows the full size image in the preview selection zone
body: <p>I'm using the Jcrop jQuery library to allow users to choose a round/circle crop area on images they upload.  Their demo page is: <a href="http://jcrop.org/demos/circle" rel="nofollow">http://jcrop.org/demos/circle</a></p>
  
  <p>When the image is too big to fit on screen, Jcrop can be given the JS options:</p>
  
  <pre><code>boxWidth: 500,   //Maximum width to display bigger images
  boxHeight: 500,  //Maximum height to display bigger images
  </code></pre>
  
  <p>This successfully resizes the image down to fit the screen for the whole image, however the draggable selection zone instead displays the image at its original full size.  And therefore the selection zone does not match everything surrounding it.</p>
  
  <p>Please see the problem at: <a href="https://jsfiddle.net/LiebeMachen/mjw88acr/15/" rel="nofollow">https://jsfiddle.net/LiebeMachen/mjw88acr/15/</a></p>
  
  <p>Try dragging around the circle over various places in the image, and you'll see that what is in the circle is actually the full size version of the image, when it should fit in with the surrounding area based on how much the image was sized down for display.</p>
  
  <p>As far as I know, this issue doesn't occur when Jcrop using a regular square/rectangle selection.  It seems to be specific to doing a circle selection.  There are some question similar question on here about this, but those questions were not using circle selection, and their fixes don't seem to help here with a circle.</p>
  
  <p>My actual in-page Javascript just starts from line 2875 in the JavaScript pane on jsfiddle.  All the JS above that is just the jcrop.js library itself.</p>
  
  <p>How can I keeping using the boxWidth/boxHeight settings to scale large images down, while getting the selection zone to also do the same?</p>