jQuery头像裁剪 Image Cropper 生成图片

分类：Javascript| 发布：camnprbubuol| 查看： | 发表时间：2010/12/28

left top width height

实现原理：

这是一个基于jQuery UI的图像裁剪前端脚本。
利用Draggable和Resizable两个插件让虚线框可移动可缩放，并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。

给大图加CSS透明度，于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点，计算出虚线框左上角的坐标offset（就叫坐标吧- -|）。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下，然后改变背景图的位置position，这样效果就出来了。

再说下预览图，首先预览图跟实际图是不一样大的，它们之间存在一个比率n（所设预览图大小除实际图大小）。前面已经计算过虚线框的坐标了，预览图的scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等，当移动或缩放时计算一下，然后改变预览图的位置scrollTop和scrollLeft，OK了。

当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序，剩下工作归后台技术。

一些碎片：

html如下：

<form id="setFace" name="setFace" method="post" action=""> 
    <div id="imgBox"><img id="faceImg" src="style/xx.jpg" /><div id="imgCut"></div></div> 

    <div id="imgBox_pre"><strong>头像预览</strong><div><img id="faceImg_pre" src="style/xx.jpg" /></div><button type="submit">保存头像</button></div> 

    left<input name="left" type="text" id="left" size="3" readonly="readonly" /> 

    top<input name="top" type="text" id="top" size="3" readonly="readonly" /> 

    width<input name="width" type="text" id="width" size="3" readonly="readonly" /> 

    height<input name="height" type="text" id="height" size="3" readonly="readonly" /> 

    </form>

css默认样式如下：

#setFace{position:relative;} 
    #imgBox_pre{float:left;width:100px;margin-left:50px;} 

    #imgBox_pre strong{display:block;text-align:center;color:#090;} 

    #imgBox_pre button{display:block;width:70px;margin:0 auto;} 

    #imgBox_pre div{width:48px;height:48px;margin:5px auto 20px;overflow:hidden;border:#eee 5px solid;} 

    #imgBox{float:left;border:#ddd 3px solid;} 

    #imgCut{border:#fff 1px dashed;width:100px;height:100px;position:absolute;top:20px;left:20px;cursor:move;} 

    #faceImg{opacity:0.5;filter:alpha(opacity=50);} 

    

JS如下：

var scale=1; 
    var imgH=new Number; 

    var imgW=new Number; 

    var src=$("#faceImg").attr("src"); 

    var scale=48/96; 

    $("#faceImg").load(function(){ 

    imgH=$("#faceImg").height(); 

    imgW=$("#faceImg").width(); 

    $("#imgBox").width(imgW).height(imgH); 

    $("#setFace").width(700).height(imgH+4); 

    $("#imgCut").css("background","url("+src+") -20px -20px no-repeat"); 

    $("#faceImg_pre").height(imgH*scale); 

    $("#imgBox_pre div").scrollTop(20*scale).scrollLeft(20*scale); 

    }); 

    $("#imgCut").draggable({ 

    containment:$("#faceImg"), 

    drag:function(){ 

    var temp_top=$(this).offset().top-$("#faceImg").offset().top; 

    var temp_left=$(this).offset().left-$("#faceImg").offset().left; 

    scale=48/$(this).height(); 

    $("#faceImg_pre").height(imgH*scale); 

    $(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat"); 

    $("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale); 

    }, 

    stop:function(){ 

    $("#width").val($(this).width()); 

    $("#height").val($(this).height()); 

    $("#left").val(($(this).offset().left-$("#faceImg").offset().left)); 

    $("#top").val(($(this).offset().top-$("#faceImg").offset().top)); 

    } 

    }); 

    $("#imgCut").resizable({ 

    containment:$("#faceImg"), 

    handles:"all", 

    knobHandles:true, 

    aspectRatio:true, 

    minWidth:96, 

    minHeight:96, 

    resize:function(){ 

    var temp_top=$(this).offset().top-$("#faceImg").offset().top; 

    var temp_left=$(this).offset().left-$("#faceImg").offset().left; 

    scale=48/$(this).height(); 

    $("#faceImg_pre").height(imgH*scale); 

    $(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat"); 

    $("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale); 

    }, 

    stop:function(e,ui){ 

    $("#width").val($(this).width()); 

    $("#height").val($(this).height()); 

    $("#left").val(($(this).offset().left-$("#faceImg").offset().left)); 

    $("#top").val(($(this).offset().top-$("#faceImg").offset().top)); 

    } 

    });

相关下载：

下载最新版本jQuery

下载jQuery UI 中的UI Core、Draggable、Resizable三个文件