Jcrop-Bild wird in der Vorschau nicht korrekt angezeigt

Question

Ich verwende derzeit Jcrop, um einem Benutzer das Beschneiden eines Bildes zu ermöglichen. Sie können ein Bild auswählen, das Bild wird in das Bild geladen und ein Miniaturbild zeigt an, wie ein zugeschnittenes Bild aussehen würde.

Ich hatte dies funktioniert, als ich es auf localhost mit einem Wamp-Server getestet habe, aber sobald ich es auf meine Wordpress-Seite hochgeladen hatte, ging die Vorschau schief. Hier ist ein Screenshot, wie es aussieht, wenn es schief geht: image Die schwarzen Linien zeigen die gesamte Breite des Vorschaubildes, wie Sie sehen können, ist die Ausschnittauswahl verzerrt und verschwindet aus dem Miniaturbild.

Ich habe die Unterschiede in inspect Element auf meinem localhost und meine Wordpress-Website untersucht und festgestellt, dass die Breite und Höhe Element der Hälfte des Bildes ist hochgeladen, auf meinem localhost bekommt es die genaue Breite und Höhe des Bildes.

Hier sind meine Jcrop Einstellungen i verwenden und andere Codes, die relevant sein könnten:

$(document).ready(function(){ 
     $('#preview').Jcrop({ 
      onChange: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)}, 
      onSelect: function(coords){showPreview(coords, origWidth, origHeight, thumnailWidth, thumbnailHeight)}, 
      onRelease: function(){releaseCheck(minWidth, minHeight)}, 
      boxWidth: 400, 
      bgColor: 'white', 
      allowSelect: 'false', 
      setSelect: [0, 0, minWidth, minHeight], 
      minSize: [ minWidth, minHeight ], 
      aspectRatio: minWidth/minHeight 
     }, function(){ 
      jcrop_api = this; 
      }); 
    $('#thumbnail-div').css({"width" : thumnailWidth, "height" : thumbnailHeight, "background-image" : "url(" + achtergrondLink + ")"}); 
    $('#thumbnail').css({"opacity" : "0.7"}); 
}); 

Die minWidth und minHeight Werte die minimale Menge an Pixeln die Ernte Auswahl sonst wird das Bild zu niedrig sein sollten, sind Auflösung. Das jcrop-Plugin berechnet automatisch, wie das Bild in die Box skaliert wird. thumbnailwidth und height sind voreingestellte Variablen.

Dies ist die Showpreview-Funktion, die jedes Mal ausgeführt wird, wenn sich der Ausschnitt ändert oder ausgewählt wird.

function showPreview(c, origWidth, origHeight, thumnailWidth, thumbnailHeight){ 
     $('#x1').val(c.x); 
     $('#y1').val(c.y); 
     $('#x2').val(c.x2); 
     $('#y2').val(c.y2); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 

     var rx = thumnailWidth/c.w; 
     var ry = thumbnailHeight/c.h; 

     $('#thumbnail').css({ 
      width: Math.round(rx * origWidth) + 'px', 
      height: Math.round(ry * origHeight) + 'px', 
      marginLeft: '-' + Math.round(rx * c.x) + 'px', 
      marginTop: '-' + Math.round(ry * c.y) + 'px' 
     }); 
    } 

Hier ist auch ein Link mit allen Code, den ich benutze ich alles in 1 Datei auch die Skript-Tags. Full source code

Answer 1

Nach ca. 5 Stunden searchng ich es endlich gefunden, Es stellt sich heraus, dass einige Themen haben diese CSS in der style.css:

img { 
max-width: 100%; 
} 

es sich herausstellen, dass, wenn du hast ein thumbnail du hast ein mit deinem ganzen bild dahinter und es hat überlauf versteckt. Wenn Sie also den Ausschnittbereich in der Vorschau ändern, bewegt sich das Bild hinter dem Thumbnail div so, dass es wie Ihr Endprodukt aussieht.

Aber wenn maximale Breite: 100%; Bei allen Bildern ist das Thumbnail tatsächlich auf das div skaliert, was es nicht tun sollte.

Also deaktivieren Sie max-width: 100%; oder setzen Sie Ihre eigenen CSS auf max-Breite: keine! wichtig

Answer 2

Ich habe diesen Stil im Kopf hinzugefügt. Scheint funktioniert gut. willst du so?

 <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.Jcrop.js"></script> 
     <script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script> 
     <script src="https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay.min.js"></script> 
     <link href='http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.css' rel='stylesheet' type='text/css'> 

     <style> 
      #thumbnail-div #thumbnail{ 
        opacity: 1 !important; 
      } 
      .thumbnail-div{ 
        opacity: 0.7; 
      } 
     </style> 

updated code