0

我正在尝试在更改头像的页面中使用带有预览窗格的 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;
          });           

    });
4

2 回答 2

1

我在使用 JCrop 时更改图像这个主题和 AdmSteck 的答案中看到了与您相同的问题，这是最好的一个。

希望这有帮助！

于 2013-01-11T16:13:08.257 回答
-1

在插件的未缩小版本中，“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);
于 2013-07-13T13:07:47.743 回答