我有一个非常简单的问题,但我对导致问题的原因一无所知。在我的一个应用程序中,我使用 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_api
部分,但我慢慢开始认为这个问题没有解决方案......
这是我到目前为止所尝试过的:
制作一个div<div id="cropper-box"></div>
并使用jQuery('#cropper-box').append('<img src="" id="cropbox" />');
然后设置该值。我尝试了同样的操作,但在一步中而不是之后设置图像 src。
我尝试在页面上放置一个占位符<img src="placeholder.png" id="cropbox" />
并在单击按钮后更改源。这是可行的,但cropperarea保持图像的大小(300x180px或其他)并且不会像它应该的那样变大。
// Edit:
尝试更多后,我发现图像源已被正确替换(!使用 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 高度/宽度放入其中,第二次将适当的尺寸放入其中。