头像设置(类似于CSDN的头像设置)

最新推荐文章于 2022-09-16 20:33:50 发布
最新推荐文章于 2022-09-16 20:33:50 发布
阅读量1.1k 收藏
点赞数
文章标签： function null stylesheet class file input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingliqin/article/details/6494579
版权

用到的组件是铁匠组件

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

dingliqin
关注
BBS论坛系统,类似于csdn的博客
03-06
2、用户功能:发帖、跟帖、找回密码、文本编辑、头像上传、更改头像、查看帖子、删除和修改自己的帖子、进行点赞和踩贴。 3、数据需求：:用户必须先注册再登录进入系统，用户的信息主要包括用户名,用户密码，用户邮箱...
模仿csdn头像悬浮层.rar
01-06
【标题】：“模仿csdn头像悬浮层.rar”这一压缩包文件显然包含了关于如何创建一个类似于CSDN网站上头像悬浮效果的资源。在CSDN网站上，当用户鼠标悬停在头像上时，会出现一个包含用户信息的小窗口，这种交互设计既...
关于CSDN(头像)
u013623100的专栏
08-20 1167
刚弄了个博客，写了个笔记，看着
CSDN换头像
syyyy712的博客
10-14 770
CSDN换头像
CSDN修改头像（最新）
沉溺于移动互联网
03-02 1264
转载请注明来源：http://blog.csdn.net/u010194538/article/details/50777588 看到被人更换CSDN头像，自己也想修改。 但在PC端网页直接点击头像->选择图片，却怎么也加载不进来。刷新了还是不行，换个浏览器还是不行。 于是我就想可不可以在移动端app更改，因为现在都在大力推广移动平台，下载CSDN的app还可以赠送50C币...
js实现编辑用户头像
netingcn
01-21 573
目前很多网站都允许用户上传自己的图像，而编辑工具多为flash来实现，而我用javascript来实现，功能包括预览、缩放以及拖动等。前段用html，css加js，后端使用ImageMagicK来进行图片处理，为了方便运行deom程序，里面上传文件以及最终的图片裁减是用jsp来实现的，当然可以使用别的，以前曾经使用php来完成这两个功能，如果真正在java项目中，实现起来更加容易（因为本人一直从事...
IronSoft文件上传图片处理组件(铁匠作品)
ph4studio的专栏
01-18 1486
今天见到CSDN上有人提问要用socket解决大文件的上传，刚好看到IronSoft文件上传图片处理组件(铁匠作品)下载回来，不过还没有试用，先保留想想asp里面还有多少东西我不会的呢我连个9流的程序员都算不上添加两个下载地址： http://blog.ironsoft.net/download/Ironsoft (PRC)1.3.rar (安装版) http://blog.ironsoft.ne
头像
02-12
在IT行业中，头像通常指的是用户在...总的来说，这个项目为我们提供了一种深入理解并实践头像生成技术的机会，无论是对于个人用户想要创建独特的头像，还是对于开发者想要在自己的产品中加入类似功能，都将大有裨益。
实现csdn头像悬浮效果的网页代码示例
根据提供的文件信息，该文件可能包含了一系列关于如何在网页上实现类似CSDN头像悬浮层功能的代码或教程。CSDN是中国一个非常著名的IT社区，聚集了大量的开发者和程序员，而头像悬浮层是网站常见的交互设计元素之一，...
CSDN账户头像弹出层实现方法及源码解析
它类似于ASP.NET的页面框架，但是更加轻量级，并且可以在不生成页面的情况下处理请求。它运行在服务器端，能够直接访问HTTP请求和响应对象。 在本案例中，HTTP Handler被用于处理当用户鼠标悬停在CSDN账户头像上的...
IronBarcode for .NET 2022.9.8 Crack
控件与插件之大全
09-16 416
Iron Software produces quality software component products for C# / VB.Net. Iron’s philosophy puts developers at the heart of every piece of software released. Ease of installation and ease of use are their highest priorities, backed up by customer support
修改csdn的昵称和头像
qq_33168577的博客
03-14 1950
一、修改csdn昵称问题    1.首先使用三大浏览器 火狐浏览器/谷歌浏览器/IE浏览器 修改csdn 昵称都有个 * 号，排除是浏览器兼容问题。        2.是否csdn不允许修改 用户昵称通过Wireshark工具抓包，发现form表单有nicename，是提交上去服务器了---------------------------------------------------------...
CSDN换头像的方法
cjc211322的专栏
05-16 3278
CSDN换头像的方法
如何更换及调整csdn头像
小爷欣欣
07-28 1837
入驻CSDN的每位程序猿们肯定都想拥有一个好看的博客头像吧(不注重形象的就飘过吧)!然而CSDN的头像设置不人性,随便上传一个头像,结果却是画质相当模糊难看,极其不尽人意,作为一名相当注重个人形象的猿来说这是比改了一天的bug还有难受的事.下面小编就来讲讲自己的修改头像史. 1,登录CSDN,进入个人主页
CSDN设置头像不显示
viking_xhg的博客
01-17 1059
因为之前一直没有设置头像,今天设置头像,发现设置完成却没有用. 作为天枰座的我,强迫症犯了, 简直无法忍受.终于让我找出什么问题. 只要根据下面问题一个个排除就行了. 1.CSDN服务器问题.无法设置. 2.浏览器问题,google浏览器设置完成无法显示. 可以用其他浏览器试下. 如果其他浏览器可以显示,那么你清除下浏览器缓存就行了. 3.下载手机的csdn的APP
如何在博客园上面显示自己定义的头像--【sky原创】
weixin_34320159的博客
12-03 208
如何在博客园上面显示自己的头像 1、打开你的博客主页： 点击【管理】，如图：   2、点击【设置】，在如下图的界面里点击【头像设置】     3、出现如下图界面后，选择右上角的【我的博客】左边那个选项，我的是【张昺华-sky】   4、出现如下图后右键--【查看网页源代码】     5、出现下图后，按快捷键【ctrl+f】搜索【user_profile_bl...
[C#]将文字转换成图片
weixin_30722589的博客
04-22 1139
/// <summary> /// 将文字转换成图片 /// </summary> /// <param name="checkCode"></param> /// <returns></returns> private ...
js实现上传头像（看了你就懂，相信我）
主要领域：前端开发
05-23 3511
效果图： html: <div class="tx ovf"> <div class="tit">头像</div> <div class="ovf tx-img"><img src="" alt=""> <div class="upload-b"><spa...
如何更换个人CSDN博客 用户头像
iOS随笔
01-25 5632
前言首先吐槽一下：小编最近想更换个人CSDN博客的头像， 发现PC端网页上怎么搞都不成功。问了同事，竟然也遇到同样的问题， 根据小编的性格，这是不能容忍的，一个CSDN 技术网站，居然头像都不给换，不可能呀。。。。。 小编相信 一定是可以换的。最终通过自己验证找到了一种 通过手机版 的CSDN 来更换 头像，进而实现PC端网页同步的方法。（网上论坛上的直接在PC上更换浏览器 和 清空浏览器缓存的方
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值