我有一个非常简单的问题,但我对导致问题的原因一无所知。在我的一个应用程序中,我使用 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或其他东西)并且不会变大。
// 编辑:
尝试更多显示图像源被正确替换(!使用 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 高度/宽度放入其中,第二次放入正确的尺寸。