Jcrop 图像在预览中无法正确显示

Question

我目前正在使用 Jcrop 让用户裁剪图像。他们可以 select 一张图片，图片将加载到中，缩略图将显示裁剪后的图片的样子。

当我使用 Wamp 服务器在本地主机上测试它时，我可以正常工作，但是当我将它上传到我的 wordpress 端时，预览就出错了。这是出错时的截图：image 黑线显示了缩略图的总宽度，您可以看到裁剪 selection 扭曲并超出缩略图。

我查看了我的本地主机和我的 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 值是裁剪 selection 应该达到的最小像素数量，否则图像的分辨率会太低。 jcrop 插件会自动计算如何将图像缩放到框中。缩略图的宽度和高度是预设的变量。

这是 showpreview 函数，每次裁剪区域更改或将被 selected 时都会执行。

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

这里还有一个 link，其中包含我使用的所有代码，我将所有内容和脚本标签都放入了 1 个文件中。 Full source code

Answer 1

我在头部添加了这个样式。似乎工作正常。你想要这样吗？

        <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

Answer 2

找了大概5个小时终于找到了，原来style.css里面有些主题有这个css:

img {
max-width: 100%;
}

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

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

所以只需禁用 max-width:100%;或将您自己的 css 设置为最大宽度：none !important

Jcrop 图像在预览中无法正确显示

Jcrop image does not show correctly in preview

jquery

css

wordpress

jcrop