思路

1.获取需裁剪图片的地址

2.跳转到裁剪页面

3.裁剪成功返回新图片地址

4.替换原有图片地址

增加修饰和事件

str += '
     
      
     
';

上面是动态生成的图片html布局数据，增加一个id标识id="'+imgType+'_'+i+'",增加一个点击事件onclick="showClip(\''+imgType+'_'+i+'\',\''+ret.list[i].path+'\')"

打开裁剪页面，并传入参数element_id和img_url

// 裁剪图片function showClip(element_id,img_url) {    // 处理图片裁剪    openWinPro('clip','element_id:'+element_id+',img_url:'+img_url);}

裁剪页面进行处理

    
        
        
            
        
        
    
    
                     
     
      图片裁剪
     
    
    
    
     
      提交
     
    
     
      重置
     
    

裁剪页面获取参数，负责裁剪图片，并发送事件监听和传递参数

api.sendEvent({    name: 'clip_success',    extra: {        element_id: element_id,        new_img_url: ret.destPath    }});

原页面增加监听事件和处理

// 监听图片裁剪    api.addEventListener({        name: 'clip_success'    }, function(ret, err) {        if (ret) {            $("#"+ret.value.element_id).css('background-image','url('+ret.value.new_img_url+')');            $("#"+ret.value.element_id+" input").val(ret.value.new_img_url);        }    });

一切都ok了

裁剪前

裁剪中

裁剪后

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6208600.html，如需转载请自行联系原作者