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

Posted 2023-02-25

【中文标题】Jcrop 图像在预览中无法正确显示

【英文标题】：Jcrop image does not show correctly in preview

【发布时间】：2016-12-01 21:25:24

【问题描述】：

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

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

我查看了我的本地主机和我的 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 插件会自动计算如何将图像缩放到框中。 缩略图的宽度和高度是预设的变量。

这是每次裁剪区域更改或被选中时都会执行的显示预览功能。

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

【参考方案1】：

找了大概5个小时终于找到了，原来有些主题的style.css中有这个css：

img 
max-width: 100%;

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

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

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

【参考方案2】：

我在 head 中添加了这种样式。似乎工作正常。你想要这样吗？

        <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

【讨论】：

你的答案不正确，但你还是修好了，我在看你的 sn-p，我记得我需要做的事情

我以为你的问题是两条黑线。

没有黑线显示缩略图区域的宽度。