使用 Jcrop，更改图像时无法正确刷新预览窗格

Posted 2023-02-25

【中文标题】使用 Jcrop，更改图像时无法正确刷新预览窗格

【英文标题】：Using Jcrop ,could not refresh preview pane correctly when changing image

【发布时间】：2012-12-22 16:51:29

【问题描述】：

我正在尝试在更改头像的页面中使用带有预览窗格的 Jcrop。但是，在上传新图像文件后，当我调用 setImage 设置新图像（具有不同的宽度/高度）并设置预览图像的属性时，预览窗格显示不正确。我使用萤火虫追踪，似乎img仍在使用前一张图像的高度，宽度。我修改了下载包中的tutorial3，简单的添加了一个按钮来改变图像，看看预览窗格是否正确。我似乎是同样的错误。下面是按钮单击功能的代码。 有什么解决办法吗？

        $('#img1').click(function(e) 
        $('#preview').attr('src','demo_files/img50d5753eb067c.jpg');
        jcrop_api.setImage('demo_files/img50d5753eb067c.jpg');
          $('#target').Jcrop(
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: 1,
            boxWidth: 450
          ,function()
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
          );           

    );

【参考方案1】：

我在这个主题Change an Image while using JCrop 和 AdmSteck 的答案中看到了与您相同的问题，其中最好的一个。

希望对您有所帮助！

【参考方案2】：

在插件的未缩小版本中，“boundx 和 boundy”被声明为不会在 setImage 函数之外更新的局部变量。您需要做的就是删除这两个变量的 'var' 并使它们成为全局变量。

从第 328 行开始，

var boundx = $img.width(),
    boundy = $img.height(),


    $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css(
    position: 'relative',
    backgroundColor: options.bgColor
  ).insertAfter($origimg).append($img);

改成

  boundx = $img.width();
  boundy = $img.height();


  var $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css(
    position: 'relative',
    backgroundColor: options.bgColor
  ).insertAfter($origimg).append($img);