搜索:
首页 >> 下载中心 >> Asp源码 >> 仿MOP、ChinaRen、Csdn在线切割图片设置头像功能

仿MOP、ChinaRen、Csdn在线切割图片设置头像功能

2011-6-25 asp之家 网友评论投递文章

唯一用到的组件是铁匠组件

页面:2个asp文件,一个Css文件,一个Js文件

Index.asp代码:

<%

Imgw=75
Imgh=75
ImgBg="images/bg75.gif"
ImgBgw=Imgw+16
ImgBgh=Imgh+17
ImgSc=1
minw=30
minh=30
%>
<html>   
<head>
<title></title>
<link href="images/wpager.css" rel="stylesheet" type="text/css">
<script src="images/ok.js" type="text/javascript"></script>
<style type="text/css">
#cropDiv {
 width:<%=Imgw%>px;
 height:<%=Imgh%>px;
}
#resultDiv {
 width:<%=Imgw%>px;
 height:<%=Imgh%>px;
 background:url('<%=ImgBg%>');
}
</style>
</head>
<body>
<%
ImgPath="images/test.jpg"
Set IronDraw = Server.CreateObject("Ironsoft.DrawPic")
IronDraw.LoadFromFile Server.Mappath(ImgPath)
picw=IronDraw.width
pich=IronDraw.height
Set IronDraw=Nothing
if (picw<Imgw and pich>Imgh) or (picw<Imgw and pich<Imgh and picw<pich) then
 corpw=picw
 corph=picw/ImgSc
 maxw=picw
 maxh=corph
elseif (pich<Imgh and picw>Imgw) or (picw<Imgw and pich<Imgh and picw>pich) then
 corph=pich
 corpw=pich*ImgSc
 maxw=corpw
 maxh=pich
else
 corpw=Imgw
 corph=Imgh
 maxw =500
 maxh =500
end if
%>
<form action="SetSave.asp" method=post target=_blank><input id="btnImgInfo" name="xy" style="width:600"> <input type=submit value="查看效果"><input name="picfile" type=hidden value="<%=ImgPath%>"></form>
<div style="position:absolute;top:50; left:10;width:<%=ImgBgw%>;height:<%=ImgBgh%> ;background:url('<%=ImgBg%>');">
 <div style="position:absolute;top:8; left:8"><div id="resultDiv"><img src="<%=ImgPath%>" id="resultPic"></div></div>
</div>
<div id="bgDiv"><img src="<%=ImgPath%>" style="filter:alpha(opacity:50);"></div>
<div id="picDiv" style="clip:rect(0,0,0,0);"><img src="<%=ImgPath%>"></div>
<div id="cropDiv" style="width:<%=corpw%>px;height:<%=corph%>px">
<table height="100%" width="100%" cellspacing="0" cellpadding="0"><tr><td height="100%" width="100%"><div id="cropDrag"></div></td></tr></table>
<div id="topLeft" class="border"></div>
<div id="topRight" class="border"></div>
<div id="bottomLeft" class="border"></div>
<div id="bottomRight" class="border"></div>
</div>
<script language="javascript">
 picw = <%=picw%>;
 pich = <%=pich%>;
 minw = <%=minw%>;
 minh = <%=minh%>;
 maxw = <%=maxw%>;
 maxh = <%=maxh%>;
 
    var objbtnImgInfo ;
 objbtnImgInfo = document.getElementById("btnImgInfo") ;
  
 function fnWritePos(intLeft,intTop,intw,inth,intx,inty) {
 objbtnImgInfo.innerText = intLeft +","+ intTop  +","+ intw +","+ inth +","+ intx +","+ inty;
 }
  var divCrop = $("cropDiv");
  var divCropDrag = $("cropDrag");
  var divPic = $("picDiv");
  var divRes = $("resultDiv");
  var picRes = $("resultPic");
  
  var topLeft = $("topLeft");
  var topRight = $("topRight");
  var bottomLeft = $("bottomLeft");
  var bottomRight = $("bottomRight");
  
  
  divCrop.style.left = (divPic.offsetLeft) + "px";
  divCrop.style.top = (divPic.offsetTop) + "px";
  var constrain = <%=ImgSc%>;
  
  function setClipPos() {
   var t = (divPic.offsetTop);
   var l = (divPic.offsetLeft);
   var top = divCrop.offsetTop-t;
   var right = divCrop.offsetLeft+divCrop.offsetWidth-l;
   var bott = divCrop.offsetTop+divCrop.offsetHeight-t;
   var left = divCrop.offsetLeft-l;
   var r = {t:top,r:right,b:bott,l:left};
   var rect = "rect("+r.t+","+r.r+","+r.b+","+r.l+")";
   if (right>picw)
   { 
   if (picw>pich)
   {
   right=picw;left=left-2;
   }else
   {
   right=right;left=left-2;
   }
   }
   if (bott>pich) 
   {
   if (picw<pich)
   {
   bott=pich;top=top-2;
   }else
   {
   bott=bott;top=top-2;
   }
   }
   if (left<0) left=0;
   if (top <0) top=0;
   fnWritePos(left,top,divCrop.offsetWidth,divCrop.offsetHeight,right,bott);   
   
   divPic.style.clip = rect;
   
   var sc = <%=Imgh%>/divCrop.offsetHeight;
   picRes.style.zoom = (sc*100)+"%";
   
   divRes.scrollTop = r.t*sc;
   divRes.scrollLeft = r.l*sc;
   
  }
  
  Resize.init(topLeft, divCrop, 0, constrain, minw, minh, maxw, maxh);
  Resize.init(bottomLeft, divCrop, 1, constrain, minw, minh, maxw, maxh);
  Resize.init(topRight, divCrop, 2, constrain, minw, minh, maxw, maxh);
  Resize.init(bottomRight, divCrop, 3, constrain, minw, minh, maxw, maxh);
  divCrop.onResize = function(x,y, mousex, mousey) {
   var t = parseInt(divPic.offsetTop);
   var l = parseInt(divPic.offsetLeft);
   if (x + divCrop.offsetWidth > l + divPic.offsetWidth) {
    x = l + divPic.offsetWidth - divCrop.offsetWidth;
    divCrop.style.left = x + "px";
   }
   if (x < l) {
    x = l;
    divCrop.style.left = x + "px";
   }
   if (y + divCrop.offsetHeight > t + divPic.offsetHeight) {
    y = t + divPic.offsetHeight - divCrop.offsetHeight;
    divCrop.style.top = y + "px";
   }
   if (y < t) {
    y = t;
    divCrop.style.top = y + "px";
   }
   //02-24
   if (divCrop.offsetHeight > divPic.offsetHeight) {
    divCrop.style.height = divPic.offsetHeight-7 + "px";
   }
   setClipPos();
  }
  
  Drag.init(divCropDrag, divCrop);
  divCrop.onDrag = function(x,y, mousex, mousey) {
   var t = parseInt(divPic.offsetTop);
   var l = parseInt(divPic.offsetLeft);
   if (x + divCrop.offsetWidth > l + divPic.offsetWidth) {
    x = l + divPic.offsetWidth - divCrop.offsetWidth;
   }
   if (x < l) {
    x = l;
   }
   if (y + divCrop.offsetHeight > t + divPic.offsetHeight) {
    y = t + divPic.offsetHeight - divCrop.offsetHeight;
   }
   if (y < t) {
    y = t;
   }
   divCrop.style.left = x + "px";
   divCrop.style.top = y + "px";
   setClipPos();
  }
  setClipPos();
</script>
</body>
</html>

 SetSave.asp代码

 

<%

file1="1"
response.write request("xy")
xy=split(request("xy"),",",-1,1)
Set IronDraw = Server.CreateObject("Ironsoft.DrawPic") 
IronDraw.LoadFromFile Server.Mappath(request("picfile"))   '装载图片,也要记住有权限的问题
IronDraw.Cut  cint(xy(0)),cint( xy(1)),cint(xy(4)),cint( xy(5)) '大于原大,添加空白
IronDraw.SaveAS Server.Mappath(file1&".jpg")  '保存图片:图片的全路径,记住有权限的问题,应该把它保存在有权限的目录下面
'IronDraw.ShowImage       '在页面中显示图片
Set IronDraw = Nothing
response.Write "<img src="&file1&".jpg>"
%>

wpager.css代码

 

/*制作头像*/

#bgDiv,#picDiv {
 position:absolute;
 top:50px;
 left:200px;
 text-align:center;
 z-index:5;
 padding:0;
}
#cropDiv {
 position:absolute;
 z-index:2000;
 padding:0;
 border: 1px solid #FF0000;
}
#cropDiv .border{
 position:absolute;
 width:5px;
 height:5px;
 overflow:hidden;
 background-color:#FF0000;
 z-index:3001;
 padding:0;
}
#topLeft{
left:0px;top:0px;cursor:NW-resize;
}
#topRight{
right:0px;top:0px;cursor:NE-resize;
}
#bottomLeft{
left:0px;bottom:0px;cursor:SW-resize;
}
#bottomRight{
right:0px;bottom:0px;cursor:SE-resize;
}
#resultDiv {
 margin:0;
 overflow:hidden;
 padding:0
}
#cropDrag {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 cursor:move;
 z-index:3000;
}
/* Topaz End */

ok.js代码

 

function $() {

  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1) 
      return element;
    elements.push(element);
  }
  return elements;
}
//-------------------------------------------------------------------
//Drag Object
var Drag={
 "obj":null,
 "init":function(a, aRoot){
   a.onmousedown=Drag.start;
   a.root = aRoot;
   if(isNaN(parseInt(a.root.style.left)))a.root.style.left="0px";
   if(isNaN(parseInt(a.root.style.top)))a.root.style.top="0px";
   a.root.onDragStart=new Function();
   a.root.onDragEnd=new Function();
   a.root.onDrag=new Function();
  },
 "start":function(a){
   window.event.cancelBubble = true;
   var b=Drag.obj=this;
   a=Drag.fixE(a);
   var c=parseInt(b.root.style.top);
   var d=parseInt(b.root.style.left);
   b.root.onDragStart(d,c,a.clientX,a.clientY);
   b.lastMouseX=a.clientX;
   b.lastMouseY=a.clientY;
   document.onmousemove=Drag.drag;
   document.onmouseup=Drag.end;
   return false;
  }, 
 "drag":function(a){
   a=Drag.fixE(a);
   var b=Drag.obj;
   var c=a.clientY;
   var d=a.clientX;
   var e=parseInt(b.root.style.top);
   var f=parseInt(b.root.style.left);
   var h,g;
   h=f+d-b.lastMouseX;
   g=e+c-b.lastMouseY;
   b.root.style.left=h+"px";
   b.root.style.top=g+"px";   
   b.lastMouseX=d;
   b.lastMouseY=c;
   b.root.onDrag(h,g,a.clientX,a.clientY);
   return false;
  },
 "end":function(){   
   document.onmousemove=null;
   document.onmouseup=null;
   Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
   Drag.obj=null;
  },
 "fixE":function(a){
   if(typeof a=="undefined")a=window.event;
   if(typeof a.layerX=="undefined")a.layerX=a.offsetX;
   if(typeof a.layerY=="undefined")a.layerY=a.offsetY;
   return a;
  }
}
//-------------------------------------------------------------------
//Resize Object
var Resize={
        "obj":null,
 "init":function(a, aRoot, direct, constrain, minw, minh, maxw, maxh){
   a.onmousedown=Resize.start;
   a.root = aRoot;
   a.direct = direct; // 0-NW 1-SW 2-NE 3-SE
   a.constrain = constrain;
   if (minw) a.minw = minw;
   if (minh) a.minh = minh;
   if (maxw) a.maxw = maxw;
   if (maxh) a.maxh = maxh;
   if(isNaN(parseInt(a.root.style.left)))a.root.style.left="0px";
   if(isNaN(parseInt(a.root.style.top)))a.root.style.top="0px";
   a.root.onResizeStart=new Function();
   a.root.onResizeEnd=new Function();
   a.root.onResize=new Function();
  },
 "start":function(a){
   window.event.cancelBubble = true;
   var b=Resize.obj=this;
   a=Resize.fixE(a);
   var c=parseInt(b.root.style.top);
   var d=parseInt(b.root.style.left);
   b.root.onResizeStart(d,c,a.clientX,a.clientY);
   b.lastMouseX=a.clientX;
   b.lastMouseY=a.clientY;
   document.onmousemove=Resize.resize;
   document.onmouseup=Resize.end;
   return false;
  }, 
 "resize":function(a){
   a=Resize.fixE(a);
   var b=Resize.obj;
   var c=a.clientY;
   var d=a.clientX;
   var e=parseInt(b.root.style.top);
   var f=parseInt(b.root.style.left);
   var wt=parseInt(b.root.style.width);
   var ht=parseInt(b.root.style.height);
   var h,g,hh,ww;
   h=f+d-b.lastMouseX;
   g=e+c-b.lastMouseY;
   switch (b.direct) {
    case 0:
     var cx = (b.lastMouseX-d);
     var cy = (b.lastMouseY-c);
     var hh = (ht+cy);
     if (b.minh && hh < b.minh) {
      hh = b.minh;
     }
     if (b.maxh && hh > b.maxh) {
      hh = b.maxh;
     }
     var ww = Math.floor(hh*b.constrain);
     b.root.style.height = hh+"px";
     b.root.style.width = ww+"px";
     b.root.style.left=h+"px";
     b.root.style.top=g+"px";
     
     break;
    case 1:
     var cx = (b.lastMouseX-d);
     var cy = (b.lastMouseY-c);
     var hh = (ht-cy);
     if (b.minh && hh < b.minh) {
      hh = b.minh;
     }
     if (b.maxh && hh > b.maxh) {
      hh = b.maxh;
     }
     var ww = Math.floor(hh*b.constrain);
     b.root.style.height = hh+"px";
     b.root.style.width = ww+"px";
     b.root.style.left=h+"px";
     break;
    case 2:
     var cx = (b.lastMouseX-d);
     var cy = (b.lastMouseY-c);
     var hh = (ht+cy);
     if (b.minh && hh < b.minh) {
      hh = b.minh;
     }
     if (b.maxh && hh > b.maxh) {
      hh = b.maxh;
     }
     var ww = Math.floor(hh*b.constrain);
     b.root.style.height = hh+"px";
     b.root.style.width = ww+"px";
     b.root.style.top=g+"px";
     break;
    case 3:
     var cx = (b.lastMouseX-d);
     var cy = (b.lastMouseY-c);
     var hh = (ht-cy);
     if (b.minh && hh < b.minh) {
      hh = b.minh;
     }
     if (b.maxh && hh > b.maxh) {
      hh = b.maxh;
     }
     var ww = Math.floor(hh*b.constrain);
     b.root.style.height = hh+"px";
     b.root.style.width = ww+"px";
     break;
   }
   b.lastMouseX=d;
   b.lastMouseY=c;
   b.root.onResize(h,g,a.clientX,a.clientY);
   return false;
  },
 "end":function(){   
   document.onmousemove=null;
   document.onmouseup=null;
   Resize.obj.root.onResizeEnd(parseInt(Resize.obj.root.style.left),parseInt(Resize.obj.root.style.top));
   Resize.obj=null;
  },
 "fixE":function(a){
   if(typeof a=="undefined")a=window.event;
   if(typeof a.layerX=="undefined")a.layerX=a.offsetX;
   if(typeof a.layerY=="undefined")a.layerY=a.offsetY;
   return a;
  }
}

用到的图片[相框]:

Tags:组件  头像  裁剪 
站长工具
关键字排名查询:关键字 网址
相关文章
loading 请稍等,评论加载中...

学习Asp到Asp之家(Aspxhome.com)

闽ICP备09044667号-4