Jcrop-Kreisauswahl auf reduzierten großen Bildern zeigt das Bild in voller Größe in der Vorschau-Auswahlzone

Question

Ich benutze die Jcrop jQuery-Bibliothek, um Benutzern zu ermöglichen, einen runden/kreisförmigen Ausschnittbereich für Bilder zu wählen, die sie hochladen. Ihre Demo-Seite ist: http://jcrop.org/demos/circle

Wenn das Bild zu groß ist, auf dem Bildschirm zu passen, kann Jcrop die JS Optionen wählen:

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

Dieses erfolgreich skaliert das Bild nach unten auf den Bildschirm für das gesamte Bild passen , jedoch zeigt die ziehbare Auswahlzone stattdessen das Bild in Originalgröße an. Daher entspricht die Auswahlzone nicht allem, was sie umgibt.

Bitte beachten Sie, das Problem an: https://jsfiddle.net/LiebeMachen/mjw88acr/15/

Versuchen um den Kreis über verschiedene Orte in dem Bild ziehen, und Sie werden sehen, dass das, was in dem Kreis ist eigentlich die volle Größe Version des Bildes, wenn es sollte sich an die Umgebung anpassen, je nachdem, wie groß das Bild für die Anzeige wurde.

Soweit ich weiß, tritt dieses Problem nicht auf, wenn Jcrop eine normale Auswahl aus Rechteck und Rechteck verwendet. Es scheint spezifisch für eine Kreisauswahl zu sein. Es gibt hier einige Frage ähnliche Frage, aber diese Fragen haben keine Kreisauswahl verwendet, und ihre Korrekturen scheinen hier nicht mit einem Kreis zu helfen.

Meine eigentliche In-Seite Javascript beginnt nur von Zeile 2875 im JavaScript-Bereich auf jsfiddle. All das JS darüber ist nur die jcrop.js-Bibliothek selbst.

Wie kann ich die boxWidth/boxHeight-Einstellungen beibehalten, um große Bilder zu skalieren, während die Auswahlzone dies auch tut?

Answer 1

Das Problem, das Sie erleben, rührt von der Tatsache her, dass das Sample auf der jcrop-Website (das Sie wahrscheinlich für das kreisförmige Feld verwendet haben) die css für die kreisförmige Auswahl nicht korrekt berechnet.
Durch Anpassen der Hintergrundgröße in der CircularSel neben der Hintergrundposition erhalten Sie, was Sie erwartet haben. Sehen Sie sich den Ausschnitt unten an und vergessen Sie nicht, "your_image_id_goes_here" durch Ihre tatsächliche Bild-ID zu ersetzen.

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