Question

我目前正在使用Jcrop让用户裁剪图像。他们可以选择一个图像，图像将被加载到缩略图中，以显示裁剪后的图像。

当我使用Wamp服务器在localhost上测试它时，我有这个工作，但是一旦我将它上传到我的wordpress一侧，预览就出错了。以下是出错时的截图：image 黑色线条显示缩略图的总宽度，因为您可以看到裁剪选择失真并且超出缩略图。

我已经查看了我的localhost和我的wordpress网站上的inspect元素中的差异，发现宽度和高度元素大约是正在上传的图像的一半，在我的localhost上它获得了确切的宽度和高度图像。

以下是我使用的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插件将自动计算如何将图像缩放到框中。 thumbnailwidth和height是预设的变量。

这是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个小时的搜索后，我终于找到了它，结果发现一些主题在style.css中有这个css：

img {
max-width: 100%;
}

事实证明，如果你有一个缩略图，你可以看到它背后的完整图片并且隐藏了溢出。因此，如果您在预览中更改裁剪区域，缩略图div后面的图片将会四处移动，因此它看起来就像您的最终产品。

但是当max-width：100％;在所有图像上启用缩略图实际上缩放到它不应该做的div。

所以只需禁用max-width：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

Jcrop图像无法在预览

2 个答案: