JCrop，如何清除所有的div宽度/高度标记？ [英] JCrop, how to clear all the div width/height markup?

问题描述

我有一个配置文件图片系统，允许使用jCrop剪裁图片。我注意到，如果用户经历了几次过程，裁剪尺寸就不能正确计算，因为之前的图像仍然存在。我已经尝试了API的destroy（）方法，但是它并没有从 .jcrop-holder div及其子图像元素中清除图像源。

我怎样才能轻易摆脱这种情况？感谢。

解决方案

我有一个老版本的jCrop类似的问题，并创建了一个自定义销毁函数。下面是它的要点：$ b​​
$ b pre $ $ $ $ $ $ $ $ $
$复位缩略图的坐标预览容器
$（'＃crop_preview'）。data（coords.x，0）;
$（'＃crop_preview'）。data（coords.y，0）;
$（'＃crop_preview'）。data（coords.w，0）;
$（'＃crop_preview'）。data（coords.h，0）;

//重置jcrop的src img和页面特定的全尺寸和预览divs的副本绑定
$（＃crop，#crop_preview，.jcrop-holder img）。attr（ src，）;


函数crop_start（）
{
//使用加载事件回调
'（'＃crop'）初始化并删除先前的jCrop容器。 Jcrop（{
onChange：showPreview，
onSelect：showPreview，
onLoad：hidePreview，
aspectRatio：1，
setSelect：[0，0，50，50] ，
minSize：[50，50]，
allowResize：false，
allowMove：true
}，function（）{$（。jcrop-holder）。not ：最后一个。）删除（）;}）;


//在不支持回调的情况下使用定时器删除以前的jCrop容器
/ *
window.setTimeout（function noblank（）{
$（ .jcrop-holder）。not（：last）。remove（）;
}，1000）;
* /
}

I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.

How can I get rid of this easily? Thanks.

解决方案

I had a similar issue with an old version of jCrop and created a custom destroy function. Here is the gist of it:

function crop_reset()
  {
  //Reset coordinates of thumbnail preview container
  $('#crop_preview').data("coords.x", 0);
  $('#crop_preview').data("coords.y", 0);
  $('#crop_preview').data("coords.w", 0);
  $('#crop_preview').data("coords.h", 0);

  //Reset src of jcrop img and copies bound to page specific full size and preview divs
  $("#crop, #crop_preview, .jcrop-holder img").attr("src", ""); 
  }

function crop_start()
  {
  //Initialize and remove previous jCrop containers using load event callback
  $('#crop').Jcrop({
  onChange: showPreview,
  onSelect: showPreview,
  onLoad: hidePreview,
  aspectRatio: 1,
  setSelect: [0, 0, 50, 50],
  minSize: [50, 50],
  allowResize: false,
  allowMove: true
  },function(){$(".jcrop-holder").not(":last").remove();});


  //Remove previous jCrop containers using timer if callback is not supported
  /*
  window.setTimeout(function noblank(){
    $(".jcrop-holder").not(":last").remove();
    }, 1000);
  */
  }

这篇关于JCrop，如何清除所有的div宽度/高度标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！