Выбор круга круга на уменьшенных больших изображениях показывает полноразмерное изображение в зоне выбора предварительного просмотра

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 использует правильный выбор квадрата/прямоугольника. Кажется, что это характерно для выбора круга. Здесь есть некоторые вопросы, связанные с этим вопросом, но эти вопросы не использовали выбор круга, и их исправления, похоже, не помогают здесь с кругом.

My actual in-page Javascript только начинается с строки 2875 в панели JavaScript на jsfiddle. Все JS выше, это только сама библиотека jcrop.js.

Как я могу использовать настройки boxWidth/boxHeight для масштабирования больших изображений вниз, а также получить зону выбора, чтобы сделать то же самое?

Answer 1

Проблема, которую вы испытываете, связана с тем, что образец на веб-сайте jcrop (который вы, вероятно, использовали для круговой обрезки) не выполняет правильного вычисления css для круговой выборки.
Устанавливая размер фона в CircularSel, кроме фона, вы получите то, что ожидали. Ниже приведен фрагмент ниже, и не забудьте заменить «your_image_id_goes_here» на ваш фактический идентификатор изображения.

// 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 
 
});