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

最新推荐文章于 2025-07-05 13:14:13 发布

转载最新推荐文章于 2025-07-05 13:14:13 发布 · 1.2k 阅读

文章标签：

#function #stylesheet #class #null #file #input

介绍了一个使用ASP、JavaScript和Ironsoft组件实现的图片裁剪工具，该工具支持自定义裁剪区域大小及位置，并实时预览裁剪效果。

作者:chxwei

用到的组件是铁匠组件

页面：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>

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";

   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;
  }
}

用到的图片[相框]：