javascript - Jcrop circle selection on reduced large images shows the full size image in the preview selection zone -

i'm using jcrop jquery library allow users choose round/circle crop area on images upload. demo page is: http://jcrop.org/demos/circle

when image big fit on screen, jcrop can given js options:

boxwidth: 500,   //maximum width display bigger images boxheight: 500,  //maximum height display bigger images 

this resizes image down fit screen whole image, draggable selection zone instead displays image @ original full size. , therefore selection zone not match surrounding it.

please see problem at: https://jsfiddle.net/liebemachen/mjw88acr/15/

try dragging around circle on various places in image, , you'll see in circle full size version of image, when should fit in surrounding area based on how image sized down display.

as far know, issue doesn't occur when jcrop using regular square/rectangle selection. seems specific doing circle selection. there question similar question on here this, questions not using circle selection, , fixes don't seem here circle.

my actual in-page javascript starts line 2875 in javascript pane on jsfiddle. js above jcrop.js library itself.

how can keeping using boxwidth/boxheight settings scale large images down, while getting selection zone same?

the problem experience comes fact sample on jcrop website (which used circular crop) not proper computation of css circular selection.
adjusting background-size in circularsel besides background-position, expected. see snippet below, , don't forget replace "your_image_id_goes_here" actual image id.

 // create new selection object extended selection  var circlesel = function () { };    // set custom selection's prototype object instance  // of built-in selection object  circlesel.prototype = new $.jcrop.component.selection();    // can continue extending  $.extend(circlesel.prototype, {    zoomscale: 1,    attach: function () {      this.frame.css({        background: 'url(' + scope.imageurl() + ')'      });    },    positionbg: function (b) {      var midx = (b.x + b.x2) / 2;      var midy = (b.y + b.y2) / 2;      var ox = (-midx * this.zoomscale) + (b.w / 2);      var oy = (-midy * this.zoomscale) + (b.h / 2);      //this.frame.css({ backgroundposition: ox+'px '+oy+'px' });      this.frame.css({        backgroundposition: -(b.x + 1) + 'px ' + (-b.y - 1) + 'px',                // ############## begin fix ##############        //the following line of code float boat        backgroundsize: $('#your_image_id_goes_here').width() + 'px ' + $('#your_image_id_goes_here').height() + 'px'        // ############## end fix ##############              });    },    redraw: function (b) {        // call original update() method first, arguments      $.jcrop.component.selection.prototype.redraw.call(this, b);        this.positionbg(this.last);      return this;    },    prototype: $.jcrop.component.selection.prototype  });