Jcrop изображение не отображается правильно в предварительном просмотре

Question

В настоящее время я использую Jcrop, чтобы пользователь обрезал изображение. Они могут выбрать изображение, изображение загрузится в миниатюру и покажет, как будет выглядеть обрезанное изображение.

У меня было это работать, когда я тестировал его на локальном хостинге с помощью Wamp-сервера, но как только я загрузил его на мою сторону Wordpress, просмотр поступил неправильно. Вот скриншот того, как он выглядит, когда он идет не так: image Черные линии показывают общую ширину миниатюры, поскольку вы можете видеть, что выбор урожая искажен и выходит из миниатюры.

Я посмотрел на diffrence в элементе проверки на моем localhost и моем сайте Wordpress и обнаружил, что элемент ширины и высоты составляет примерно половину загружаемого изображения, на моем локальном хосте он получает точную ширину и высота изображения.

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

$(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"}); 
}); 

Значение MinWidth и MinHeight является минимальным количеством пикселей выбор культур должен быть иначе изображение будет слишком низким разрешающая способность. Плагин jcrop автоматически рассчитает, как масштабировать изображение в поле. Ширина и высота эскиза - это переменные, которые заданы.

Это функция showpreview, которая будет выполняться каждый раз, когда область обрезки будет изменена или будет выбрана.

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

Здесь также ссылка на весь код, который я использую. Я помещаю все в 1 файл и теги скриптов. Full source code

Answer 1

Примерно через 5 часов searchng я, наконец, нашел его, Оказывается, что некоторые темы имеют этот CSS в style.css:

img { 
max-width: 100%; 
} 

Это получится, что если у вас есть эскиз, который у вас есть с полной картинкой за ним, и у него переполнение скрыто. поэтому, если вы измените область обрезки на предварительном просмотре, изображение за миниатюром div будет перемещаться, чтобы оно выглядело как ваш конечный продукт.

Но когда максимальная ширина: 100%; на всех изображениях эскиз фактически масштабируется до div, который он не должен делать.

Так что просто отключите максимальную ширину: 100%; или установите свой собственный css в max-width: none! important

Answer 2

Я добавил этот стиль в голову. Кажется, прекрасно работает. Вы хотите, как это?

 <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