Javascript 缩小大图像上的Jcrop圆形选择在预览选择区域中显示全尺寸图像

我使用Jcrop jQuery库允许用户在上传的图像上选择圆形/圆形裁剪区域。他们的演示页面是：

当图像太大而无法在屏幕上显示时，可以为Jcrop提供JS选项：

boxWidth: 500,   //Maximum width to display bigger images
boxHeight: 500,  //Maximum height to display bigger images

这成功地调整了图像的大小，使其适合整个图像的屏幕，但是可拖动选择区域将以其原始全尺寸显示图像。因此，选择区域并不匹配它周围的所有内容

请查看以下位置的问题：

尝试在图像中的各个位置上围绕圆圈拖动，您将看到圆圈中的内容实际上是图像的全尺寸版本，根据图像的显示大小，它应该与周围区域相适应

据我所知，当Jcrop使用常规的正方形/矩形选择时，这个问题不会发生。这似乎是特定于做一个圆圈选择。关于这一点，这里有一些类似的问题，但这些问题没有使用圆选择，它们的修复似乎对圆没有帮助

我的实际页面Javascript只是从JSFIDLE上Javascript窗格的第2875行开始。上面所有的JS都只是jcrop.JS库本身

---

如何继续使用boxWidth/boxHeight设置来缩小大型图像，同时让选择区域也这样做？

您遇到的问题来自jcrop网站上的示例（您可能用于循环裁剪）没有正确计算循环选择的css
除了背景位置外，通过调整圆形中的背景大小，您将得到您期望的结果。请参阅下面的代码片段，不要忘记用实际的图像id替换“您的图像id”

//创建一个从选择扩展而来的新选择对象
var CircleSel=函数（）{}；
//将自定义选择的原型对象设置为实例
//内置选择对象的属性
CircleSel.prototype=new$.Jcrop.component.Selection（）；
//然后我们可以继续扩展它
$.extend（CircleSel.prototype{
动物园规模：1，
附件：函数（）{
this.frame.css({
背景：“url（'+scope.imageUrl（）+'）”
});
},
位置BG：功能（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）；
//css（{backgroundPosition:ox+'px'+oy+'px'}）；
this.frame.css({
背景位置：-（b.x+1）+“px”+（-b.y-1）+“px”，
//开始修复##############
//以下代码行将使您的船浮动
背景尺寸：$（“#你的"图像"id"在这里"）。宽度（）+“px”+$（“#你的"图像"id"在这里"）。高度（）+“px”
//端部固定##############
});
},
重画：函数（b）{
//首先使用参数调用原始update（）方法
$.Jcrop.component.Selection.prototype.redraw.call（this，b）；
此.positionBg（此.last）；
归还这个；
},
prototype:$.Jcrop.component.Selection.prototype
});