JCrop 与下载的动态图像集成

Posted 2023-02-25

【中文标题】JCrop 与下载的动态图像集成

【英文标题】：JCrop integration with dynamic image dowloaded

【发布时间】：2013-05-31 11:29:43

【问题描述】：

我正在尝试将 JCrop 集成到引导模式中。尽管有这些细节，但问题似乎在于图像正在“动态”下载。我的意思是：

1) 表单通过AJAX提交：

$('#postFileForm').ajaxForm( success: afterPost );

2) 'afterPost' 函数被正确调用。此函数将服务器返回的文本作为参数：

function afterPost(responseText, statusText, xhr, $form) 
    $(".downloadedContent").html(responseText);
    $("#cropbox").Jcrop();
    ...

3) 这个文本是从服务器返回的：

<img src='xxx' alt='yyy' id='cropbox' /> 

我假设，当我通过 html jQuery 方法插入图像时，图像被添加到 DOM 并且我可以使用它。如果我在插入图片之后使用 Chrome 进行调试，则可以通过 jQuery 正常检索：

$("#cropbox").attr('src') //returns the source, f.e

但是裁剪不起作用。似乎发生了一些事情，因为它的样式属性就像：

style='display:none; visibility:hidden; width:...'

我认为它可能与 css 相关（根据我将它与 Bootstrap 一起使用的事实），但如果我删除动态下载图像的部分，我只是把它放在他的位置，一切正常。

任何帮助将不胜感激！谢谢！

【问题讨论】：

jcrop 初始化函数没有得到#cropbox。如果我没记错你的#cropbox 在 responseText 变量中吗？

你能显示插入图像并应用jcrop的代码吗？我没有发现默认的 twitter 引导模式和 jcrop 有任何问题，请参阅：bootply.com/62770

对不起坎达尔普，你是对的。我忘记在返回的文本中添加正确的 id。巴斯，如果我用硬编码图像替换动态“responseText”，我就能看到 jCrop 插件正常工作。

【参考方案1】：

请原谅我。

我想向你们所有人道歉，因为你们浪费了你们的时间 :)。 JCrop 将他的控件与 jQuery 选择器返回的第一个可用元素绑定。

在这种情况下发生了什么，我在两个地方有相同的课程，而我没有将它指向选择器。

$(".downloadedContent").html(responseText) 必须类似于 $("#someDiv .downloadedContent)。

JCrop 附加到一个隐藏的 div，这就是全部。

感谢您的帮助。