Question

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

我可以通过ajax请求（而不是Jquery ajax）上传图像，并且图像可以在上传后加载到页面而不刷新页面。到现在为止，一切都很好。将图像加载到页面后，如果没有刷新页面，Jrop将不会激活。这是Jcrop激活器脚本：

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

我不确定它是否重要，这个脚本不在$（document）.ready（function（）{}中。

我尝试使用$（'＃cropbox'）来启动Jcrop。加载和$（'＃cropbox'）。单击函数而不是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();
}

Answer 1

在收到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
    });
  }
});

Answer 2

你可以为此发布你的ajax脚本吗？您应该能够在代码之后执行jcrop将图像放入#cropbox。

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

2 个答案: