Question

我正在尝试在更改头像的页面中使用Jcrop和预览窗格。但是，在上传新图像文件后，当我调用setImage设置新图像（具有不同的宽度/高度）并设置预览图像的attr时，预览窗格显示不正确。我使用firebug的痕迹，似乎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;
          });           

    });

Answer 1

我在本主题Change an Image while using JCrop中看到了与您相同的问题，而AdmSteck的答案是最好的。

希望这有帮助！

Answer 2

在插件“boundx and 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);

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

2 个答案: