Javascript jCrop（jQuery）有时无法加载图像/裁剪区域

我有一个很简单的问题，但我对问题的起因一无所知。在我的一个应用程序中，我使用jCrop作为裁剪图像的一个小插件，以适应横幅/标题等。将采取以下步骤：

1) Select an image (using CKFinder for this, CKFinder returns the image path to an input field)
2) Click a button to load the image
3) Crop the image
4) Save the image

在大约75%的情况下，一切都按照计划进行，但在其他25%的情况下，jCrop无法加载裁剪区域并将其保留为空白。下面是我使用的jQuery代码：

jQuery('#selectimg').live('click', function(e) { 
  e.preventDefault();
  var newsrc = jQuery('#img2').val();
  jQuery('#cropbox').attr('src', newsrc);
  var jcrop_api = jQuery.Jcrop('#cropbox', {
    boxWidth: 700, 
    boxHeight: 700,
    onSelect: updateCoords,
    onChange: updateCoords
  });
  //Some other JS code come's here for buttons (they work all the time)
});

我注意到，当我将#cropbox正在可复制区域中转换的部分放在一边时，图像加载得很好，因此错误在于

var=jcrop\u api

部分，但我慢慢开始认为没有解决方案

这就是我迄今为止所尝试的：

制作一个div

并使用

jQuery（“#裁剪框”）.append（“”）然后设置值。我尝试了同样的方法，但是在一个步骤中设置了图像src，而不是之后

我试图在页面
上放置一个占位符，并在单击按钮时更改源代码。这是可行的，但是cropperarea保持图像的大小（300x180px或其他大小），并且不会像它应该的那样变大

//编辑：

尝试更多的内容表明图像源被正确替换（！使用Firefox显示所选文本的源），我仔细检查了URL，但这是一个正确的URL和工作图像

在裁剪器应该位于的位置，有一个大约10x10像素的白点，裁剪器图标（加号）正在弹出。。但正如前面所说：图像没有显示

//编辑2：

因此，我已经为同一个图像的第一次和第二次尝试的来源。如前所述，第一次尝试图像将无法正确加载，第二次尝试则会正确加载（仅当第二次尝试是相同的图像时（！！））

所选页面源显示1个差异，即，首先尝试：

<img style="position: absolute; width: 0px; height: 0px;" src="http://95.142.175.17/uploads/files/Desert.jpg">



第二次尝试：

<img style="position: absolute; width: 700px; height: 525px;" src="http://95.142.175.17/uploads/files/Desert.jpg">



我猜这是被jCrop取代的图像，但为什么它第一次将高度/宽度设置为0，第二次设置为正确的大小，这是一个完全的谜。
好的，伙计们，万一其他人遇到这个问题：

如果加载一个映像并将jCrop应用到该映像的操作在每个映像之后都排得太快，jCrop会有点混乱。我仍然觉得奇怪的是，第二次尝试可以完美地工作，但我认为这与缓存的图像维度有关，这些维度由页面的DOM或其他东西识别

我提出的解决方案是创建一个函数，将#cropbox转换为jCrop区域，然后设置2秒的间隔，给jCrop一些时间来识别图像及其尺寸，然后转换元素

这是我使用的html的一部分（带有预加载程序）：

起初，我防止链接也像通常那样被跟踪（或按钮操作），然后显示加载div（这就是我隐藏占位符图像的原因，否则它看起来会一团糟）

然后从输入字段加载图像位置并复制到另一个（#img），该字段随后用于处理图像（PHP使用#img的值加载该图像）。同时#cropbox src也被设置为新图像

下面是解决我问题的部分：

我没有直接激活jCrop，而是创建了一个函数：

1) hides the loading icon
2) displays the image
3) converts #cropbox into a jCrop area
4) clean the interval (otherwise it would loop un-ending)

在这个函数之后，您可以看到，为了保存，在jCrop区域被转换之前，我延迟了2秒

希望它能帮助任何人在未来

干杯并感谢您思考@vector和其他人；-）
 在此处尝试回购协议上的边缘库：

这应该能解决你的问题。为解决您的问题而更改的行：

// Fix size of crop image.
// Necessary when crop image is within a hidden element when page is loaded.
if ($origimg[0].width != 0 && $origimg[0].height != 0) {
  // Obtain dimensions from contained img element.
  $origimg.width($origimg[0].width);
  $origimg.height($origimg[0].height);
} else {
  // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
  var tempImage = new Image();
  tempImage.src = $origimg[0].src;
  $origimg.width(tempImage.width);
  $origimg.height(tempImage.height);
}

下面是我奇怪但奇妙的解决方案：

if (obj.tagName == 'IMG') {
  var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
  if ($origimg[0].width > 1 && $origimg[0].height > 1) {
    $origimg.width($origimg[0].width);
    $origimg.height($origimg[0].height);
  } else {
    var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
     //console.log('error'+$origimg[0].width + $origimg[0].height);
  } 

创建“Image”对象并设置“src”属性不适用于您可以将图像视为已加载的图像。
此外，给定任何固定的超时时间间隔并不保证映像已经加载

相反，您应该为Image对象设置一个“onload”回调，然后初始化Jcrop对象：

var src = 'https://example.com/imgs/someimgtocrop.jpg'; 
var tmpImg = new Image();
tmpImg.onload = function() {
   //This is where you can safely create an image and a Jcrop Object
};
tmpImg.src = src; //Note that the 'src' attribute is only added to the Image Object after the 'onload' listener was defined

不要调用此函数
onChange:updateWord

在没有手机的情况下尝试一下，它会在手机上运行顺畅

您可以直接创建base64，并将其作为图像显示在您想要的任何位置。
我知道这很旧，但最近在我的安装中是随机发生的。发现这是因为在jCrop初始化之前，图像没有被完全加载

修复它所需要的只是将jCrop初始化内容包装在

$（window）.on（“加载”，函数（）{//jcrop stuff here}）

从那以后，它一直运行良好。
。。。不确定它是否会产生影响和/或帮助，但我将初始化过程分成了单独的步骤：var jcrop_api=null；jcrop_api=$.jcrop（'cropbox'）；jcrop_api.setOptions（{onChange:[showCoords，setEditDataOK（false）]，onSelect:showCoords}）；jcrop_api.setSelect（[vx，vy，vx2，vy2]）jcrop_api.focus（）；谢谢，但没有解决问题。在这种情况下，这可能是一个更常见的问题：在第一次尝试每个不同的图像时，它失败了。但如果我重新加载页面，选择相同的文件，然后再试一次，它就会工作。问题解决了，我会自己发布答案，以防有人需要。谢谢，这可能有一天会派上用场。关于使用jCrop的信息有时可能有点稀少：-）谢谢@pendo。同样的问题和你的回答让我走上了正确的道路。我让我的工作略有不同，但总的想法是一样的。您还可以使用.load（）jquery函数填充init函数，以便在图像加载完成后激发$加载（函数（）{do\u crop\u init\u here}）；您正在强制加载图像，并在完成时附加一个要触发的函数。希望这能有所帮助
// Fix size of crop image.
// Necessary when crop image is within a hidden element when page is loaded.
if ($origimg[0].width != 0 && $origimg[0].height != 0) {
  // Obtain dimensions from contained img element.
  $origimg.width($origimg[0].width);
  $origimg.height($origimg[0].height);
} else {
  // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
  var tempImage = new Image();
  tempImage.src = $origimg[0].src;
  $origimg.width(tempImage.width);
  $origimg.height(tempImage.height);
}

if (obj.tagName == 'IMG') {
  var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
  if ($origimg[0].width > 1 && $origimg[0].height > 1) {
    $origimg.width($origimg[0].width);
    $origimg.height($origimg[0].height);
  } else {
    var tempImage = new Image();
    tempImage.src = $origimg[0].src;
    $origimg.width(tempImage.width);
    $origimg.height(tempImage.height);
     //console.log('error'+$origimg[0].width + $origimg[0].height);
  } 

var src = 'https://example.com/imgs/someimgtocrop.jpg'; 
var tmpImg = new Image();
tmpImg.onload = function() {
   //This is where you can safely create an image and a Jcrop Object
};
tmpImg.src = src; //Note that the 'src' attribute is only added to the Image Object after the 'onload' listener was defined