Using Jcrop ,could not refresh preview pane correctly when changing image

0
votes

I am trying to use Jcrop with preview pane in the page of changing avatar. However, after uploading new image file, when I call setImage to set the new image(with different width/height) and also set the attr of the preview image, the preview pane show up incorrectly. I use firebug the trace, it seems the img is still using the height, width of previous image. I modify the tutorial3 in the download package, simply adding a botton to change the image to see if the preview pane is correct or not. I seem to be the same error. Here below is the code for button click function. Any solutions?

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

    });
2
jcrop

2 Answers

1
votes

I see the same problem with yours in this topic Change an Image while using JCrop and the answer of AdmSteck in which is the best one.

Hope this help!

-1
votes

within the unminified version of the plugin "boundx and boundy" are declared as local variables that do not get updated outside of the setImage function. All you need to do is remove the 'var' for these two variables and make them global.

from line 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);

change to

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