Jcrop 句柄销毁答案

【问题标题】：Jcrop Handle DestroyJcrop 句柄销毁
【发布时间】：2014-05-06 13:21:30
【问题描述】：

我允许上传多个图像，因此我需要销毁 jcrop 上的句柄，以便新图像出现在图像窗格中。我正在使用以下代码。

我只需要一种方法，将句柄从其当前的图像绑定中释放出来，以便通过此代码运行另一个图像。

    $scope.cropImage = function(file) {

    $scope.currentFile = file;
    $("#target").attr("src", file.url);
    $("#imageModal").modal("show");


    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

    $timeout(function () {
        if(jcropHandle != null) {
            jcropHandle.destroy();
        }
        jcropHandle = $('#target').Jcrop({
          onChange: updatePreview,
          onSelect: updatePreview,
          aspectRatio: xsize / ysize
        },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;

          // Move the preview into the jcrop container for css positioning
          $preview.appendTo(jcrop_api.ui.holder);
        });
    }, 0);

    function updatePreview(c)
    {
      $scope.coordinates.x1 = c.x;
      $scope.coordinates.x2 = c.x2;
      $scope.coordinates.y1 = c.y;
      $scope.coordinates.y2 = c.y2;
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };
};

$('.image-resize').each(function(i, item) {
    var img_height = $(item).height();
    var div_height = $(item).parent().height();
    if(img_height<div_height){
        //IMAGE IS SHORTER THAN CONTAINER HEIGHT - CENTER IT VERTICALLY
        var newMargin = (div_height-img_height)/2+'px';
        $(item).css({'margin-top': newMargin });
    }else if(img_height>div_height){
        //IMAGE IS GREATER THAN CONTAINER HEIGHT - REDUCE HEIGHT TO CONTAINER MAX - SET WIDTH TO AUTO  
        $(item).css({'width': 'auto', 'height': '100%'});
        //CENTER IT HORIZONTALLY
        var img_width = $(item).width();
        var div_width = $(item).parent().width();
        var newMargin = (div_width-img_width)/2+'px';
        $(item).css({'margin-left': newMargin});
    }
});

【问题讨论】：

标签： jquery jcrop

【解决方案1】：

这就是我从元素中删除 Jcrop 的方法，以便我可以将它与另一个图像一起使用。

if ($('#target').data('Jcrop')) {
   $('#target').data('Jcrop').destroy();
}

【讨论】：

【解决方案2】：

如果您需要重新使用 JCrop，请在销毁时从 img 中删除样式属性，因为样式将保留，并且如果新图像具有不同的分辨率，它将进行不正确的裁剪。添加到 astrocrack 解决方案（抱歉，我无法评论您的回复）

if ($('#target').data('Jcrop')) {
    $('#target').data('Jcrop').destroy();
    $('#target').removeAttr('style');
}

【讨论】：