如何在ajax加载后激活Jcrop选择

Question

如何在ajax加载后激活Jcrop选择

4

我正在我的项目中使用Jcrop。问题不是很严重，但如果我能解决它会更好。

我可以通过ajax请求（而不是Jquery ajax）上传图像，并且在上传后无需刷新页面即可加载图像到页面。到目前为止，一切都运行良好。但是，在图片加载到页面后，Jrop没有变得活动起来，需要刷新页面才行。这是Jcrop激活器脚本：

    jQuery(window).load(function(){
      jQuery('#cropbox').Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 3/4
      });
    });

我不确定这个脚本是否重要，它不在$(document).ready(function(){}内。

我尝试使用$('#cropbox').load和$('#cropbox').click函数来触发Jcrop，而不是jQuery(window).load(function(){}函数，但什么也没有发生。

你有什么想法吗？是否可能在通过ajax请求将图像加载到页面后立即激活Jcrop而无需刷新浏览器？

这里是Jcrop的用法：

// Remember to invoke within jQuery(window).load(...)
// If you don't, Jcrop may not initialize properly
$(window).load(function(){
                var imgWidth = $('#cropbox').width();
                var imgHeight = $('#cropbox').height();

                $('#cropbox').Jcrop({

                    onChange: showPreview,
                    onSelect: showPreview,
                    aspectRatio: 3/4,
                    setSelect: [ ((imgWidth/2)-60), 60, ((imgWidth/2)+60), 220 ],
                    addClass: 'custom',
                    bgColor: 'yellow',
                    bgOpacity: .8,
                    sideHandles: false

                });

            });

以及图片上传按钮：

<button onclick="ajaxUpload(this.form,'http://www.yemeklog.com/ajax/ajaxupload.php?filename=filename&amp;maxSize=9999999999&amp;maxW=400&amp;fullPath=http://www.yemeklog.com/images/users/160/&amp;relPath=../images/users/160/&amp;colorR=120&amp;colorG=120&amp;colorB=120&amp;maxH=600','upload_area','&lt;img src=\'http://static.yemeklog.com/images/ajax-bar-loader.gif\' width=\'220\' height=\'19\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; An error occured. Please contact.'); return false;">Upload Image</button>

还有ajaxupload.js文件：

function $m(theVar){
    return document.getElementById(theVar)
}
function remove(theVar){
    var theParent = theVar.parentNode;
    theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
    if(obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if(obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
    if(obj.detachEvent){
        obj.detachEvent('on'+type, fn);
    }else{
        obj.removeEventListener(type, fn, false);
    }
}
function isWebKit(){
    return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
    var detectWebKit = isWebKit();
    form = typeof(form)=="string"?$m(form):form;
    var erro="";
    if(form==null || typeof(form)=="undefined"){
        erro += "Hata kodu: 1.\n";
    }else if(form.nodeName.toLowerCase()!="form"){
        erro += "Hata kodu: 2.\n";
    }
    if($m(id_element)==null){
        erro += "Hata kodu: 3.\n";
    }
    if(erro.length>0){
        alert("Yükleme esnasında hata oluştu:\n" + erro);
        return;
    }
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id","ajax-temp");
    iframe.setAttribute("name","ajax-temp");
    iframe.setAttribute("width","0");
    iframe.setAttribute("height","0");
    iframe.setAttribute("border","0");
    iframe.setAttribute("style","width: 0; height: 0; border: none;");
    form.parentNode.appendChild(iframe);
    window.frames['ajax-temp'].name="ajax-temp";
    var doUpload = function(){
        removeEvent($m('ajax-temp'),"load", doUpload);
        var cross = "javascript: ";
        cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
        $m(id_element).innerHTML = html_error_http;
        $m('ajax-temp').src = cross;
        if(detectWebKit){
            remove($m('ajax-temp'));
        }else{
            setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
        $('#ajax_image_container').slideDown('slow');
    }
    addEvent($m('ajax-temp'),"load", doUpload);
    form.setAttribute("target","ajax-temp");
    form.setAttribute("action",url_action);
    form.setAttribute("method","post");
    form.setAttribute("enctype","multipart/form-data");
    form.setAttribute("encoding","multipart/form-data");
    if(html_show_loading.length > 0){
        $m(id_element).innerHTML = html_show_loading;
    }
    form.submit();
}

- aiternal

2个回答

0

你能发一下这个ajax脚本吗？在把图片放到#cropbox后，你应该可以执行jcrop。

- JeffB

感谢您的关注。我刚刚编辑了帖子，并附上了所有使用的脚本。我尝试在ajaxupload.js中初始化Jcrop，但它也不起作用。 - aiternal

你在哪里初始化它？我可能误解了你的代码，但我认为它应该放在doUpload()的最后一行或倒数第二行。 - JeffB

我在doUpload()的结尾添加了它，但是它没有起作用。$('#ajax_image_container').slideDown('slow'); 这一行也在最后一行正常工作。我认为问题更深层次，我不再为此而奋斗。谢谢。 - aiternal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff the Bear · Accepted Answer

在收到ajax请求后，可以调用jcrop对图像进行裁剪。

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    var $myImage = $("<img></img>", {
        src: data.img,    
      }).appendTo('#cropbox');
    $myImage.Jcrop({
      onChange: showPreview,
      onSelect: showPreview,
      aspectRatio: 3/4
    });
  }
});