用到的組件是鐵匠組件
頁面：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.οnmοusedοwn=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.οnmοusemοve=Drag.drag;
document.οnmοuseup=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.οnmοusemοve=null;
document.οnmοuseup=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.οnmοusedοwn=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.οnmοusemοve=Resize.resize;
document.οnmοuseup=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.οnmοusemοve=null;
document.οnmοuseup=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;
}
}
用到的圖片[相框]：
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/rbwang/archive/2008/04/27/2336316.aspx
