Question

我使用Jcrop jQuery库允许用户在他们上传的图片上选择圆形/圆形裁剪区域。他们的演示页面是：http://jcrop.org/demos/circle

当图像太大而无法放在屏幕上时，Jcrop可以获得JS选项：

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

这样可以成功调整图像大小以适合整个图像的屏幕，但是可拖动的选择区域会以原始的完整大小显示图像。因此，选择区域与周围的一切都不匹配。

请在以下位置查看问题：https://jsfiddle.net/LiebeMachen/mjw88acr/15/

尝试在图像中的各个位置拖动圆圈，然后您会看到圆圈中的内容实际上是图像的完整尺寸版本，当它应该根据周围区域与周围区域匹配时很多图像的尺寸都很小，无法显示。

据我所知，当Jcrop使用常规的方形/矩形选择时，这个问题不会发生。这似乎是专门做圆圈选择。这里有一些类似的问题，但这些问题并没有使用圈子选择，而且他们的修复似乎没有用圆圈帮助。

我的实际页内Javascript只是从jsfiddle的JavaScript窗格中的第2875行开始。上面的所有JS只是jcrop.js库本身。

如何保持使用boxWidth / boxHeight设置缩小大图像，同时让选择区域也一样？

Answer 1

您遇到的问题来自于jcrop网站上的样本（您可能用于圆形裁剪）不能正确计算圆形选择的css。
除了背景位置之外，通过调整CircularSel中的背景大小，您将获得预期的结果。请参阅下面的代码段，不要忘记更换＆＃34; your_image_id_goes_here＆＃34;与您的实际图片ID。

＆＃13;

 // Create a new Selection object extended from Selection
var CircleSel = function () { };

// Set the custom selection's prototype object to be an instance
// of the built-in Selection object
CircleSel.prototype = new $.Jcrop.component.Selection();

// Then we can continue extending it
$.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 will float your 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, with arguments
    $.Jcrop.component.Selection.prototype.redraw.call(this, b);

    this.positionBg(this.last);
    return this;
  },
  prototype: $.Jcrop.component.Selection.prototype
});

＆＃13;

缩小的大图像上的Jcrop圆圈选择显示预览选择区域中的完整尺寸图像

1 个答案: