Jcrop手柄破坏

贵子弥彦

我允许上传多个图像,因此,我需要破坏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});
    }
});
航天飞机

这就是我从元素中删除Jcrop的方式,以便可以将其与其他图像一起使用。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章