-
jsp网站头像上传并编辑的方法15
求一jsp方面的网站头像上传并编辑(如头像太大可变小,可拖动等等!)不知有没有解决方法,首次尝试做网站所以有很多不懂的地方,请大家不吝赐教!
2010年7月04日 09:54
1个答案 按时间排序 按投票排序
-
一般使用是前台Js编辑好效果以后,把编辑后的结果传到后台由JAVA处理,比如:JS编辑具体图片的大小\旋转\缩放等,然后把这些数据传到服务器上,由服务器处理;这里给你提供JS的编辑,至于后台的图片编辑我没有,你可以到网上找下(这个js我也是在JAVAEYE里收集的,忘记那位朋友叫什么了)
Drag.js 代码入下//拖放程序 var Drag = Class.create(); Drag.prototype = { //拖放对象 initialize: function(drag, options) { this.Drag = $(drag);//拖放对象 this._x = this._y = 0;//记录鼠标相对拖放对象的位置 this._marginLeft = this._marginTop = 0;//记录margin //事件对象(用于绑定移除事件) this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); this.SetOptions(options); this.Limit = !!this.options.Limit; this.mxLeft = parseInt(this.options.mxLeft); this.mxRight = parseInt(this.options.mxRight); this.mxTop = parseInt(this.options.mxTop); this.mxBottom = parseInt(this.options.mxBottom); this.LockX = !!this.options.LockX; this.LockY = !!this.options.LockY; this.Lock = !!this.options.Lock; this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this._Handle = $(this.options.Handle) || this.Drag; this._mxContainer = $(this.options.mxContainer) || null; this.Drag.style.position = "absolute"; //透明 if(isIE && !!this.options.Transparent){ //填充拖放对象 with(this._Handle.appendChild(document.createElement("div")).style){ width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize = 0; } } //修正范围 this.Repair(); addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Handle: "",//设置触发对象(不设置则使用拖放对象) Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数) mxLeft: 0,//左边限制 mxRight: 9999,//右边限制 mxTop: 0,//上边限制 mxBottom: 9999,//下边限制 mxContainer: "",//指定限制在容器内 LockX: false,//是否锁定水平方向拖放 LockY: false,//是否锁定垂直方向拖放 Lock: false,//是否锁定 Transparent: false,//是否透明 onStart: function(){},//开始移动时执行 onMove: function(){},//移动时执行 onStop: function(){}//结束移动时执行 }; Extend(this.options, options || {}); }, //准备拖动 Start: function(oEvent) { if(this.Lock){ return; } this.Repair(); //记录鼠标相对拖放对象的位置 this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; //记录margin this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0; this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0; //mousemove时移动 mouseup时停止 addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); if(isIE){ //焦点丢失 addEventHandler(this._Handle, "losecapture", this._fS); //设置鼠标捕获 this._Handle.setCapture(); }else{ //焦点丢失 addEventHandler(window, "blur", this._fS); //阻止默认动作 oEvent.preventDefault(); }; //附加程序 this.onStart(); }, //修正范围 Repair: function() { if(this.Limit){ //修正错误范围参数 this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); //如果有容器必须设置position为relative或absolute来相对或绝对定位,并在获取offset之前设置 !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative"); } }, //拖动 Move: function(oEvent) { //判断是否锁定 if(this.Lock){ this.Stop(); return; }; //清除选择 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //设置移动参数 var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; //设置范围限制 if(this.Limit){ //设置范围参数 var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; //如果设置了容器,再修正范围参数 if(!!this._mxContainer){ mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); }; //修正移动参数 iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); } //设置位置,并修正margin if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; } if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; } //附加程序 this.onMove(); }, //停止拖动 Stop: function() { //移除事件 removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); if(isIE){ removeEventHandler(this._Handle, "losecapture", this._fS); this._Handle.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); }; //附加程序 this.onStop(); } };
Resize.js 如下://缩放程序 var Resize = Class.create(); Resize.prototype = { //缩放对象 initialize: function(obj, options) { this._obj = $(obj);//缩放对象 this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0;//样式参数 this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0;//坐标参数 this._fixLeft = this._fixTop = 0;//定位参数 this._scaleLeft = this._scaleTop = 0;//定位坐标 this._mxSet = function(){};//范围设置程序 this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0;//范围参数 this._mxScaleWidth = this._mxScaleHeight = 0;//比例范围参数 this._fun = function(){};//缩放执行程序 //获取边框宽度 var _style = CurrentStyle(this._obj); this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0); this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0); //事件对象(用于绑定移除事件) this._fR = BindAsEventListener(this, this.Resize); this._fS = Bind(this, this.Stop); this.SetOptions(options); //范围限制 this.Max = !!this.options.Max; this._mxContainer = $(this.options.mxContainer) || null; this.mxLeft = Math.round(this.options.mxLeft); this.mxRight = Math.round(this.options.mxRight); this.mxTop = Math.round(this.options.mxTop); this.mxBottom = Math.round(this.options.mxBottom); //宽高限制 this.Min = !!this.options.Min; this.minWidth = Math.round(this.options.minWidth); this.minHeight = Math.round(this.options.minHeight); //按比例缩放 this.Scale = !!this.options.Scale; this.Ratio = Math.max(this.options.Ratio, 0); this.onResize = this.options.onResize; this._obj.style.position = "absolute"; !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Max: false,//是否设置范围限制(为true时下面mx参数有用) mxContainer:"",//指定限制在容器内 mxLeft: 0,//左边限制 mxRight: 9999,//右边限制 mxTop: 0,//上边限制 mxBottom: 9999,//下边限制 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) onResize: function(){}//缩放时执行 }; Extend(this.options, options || {}); }, //设置触发对象 Set: function(resize, side) { var resize = $(resize), fun; if(!resize) return; //根据方向设置 switch (side.toLowerCase()) { case "up" : fun = this.Up; break; case "down" : fun = this.Down; break; case "left" : fun = this.Left; break; case "right" : fun = this.Right; break; case "left-up" : fun = this.LeftUp; break; case "right-up" : fun = this.RightUp; break; case "left-down" : fun = this.LeftDown; break; case "right-down" : default : fun = this.RightDown; }; //设置触发对象 addEventHandler(resize, "mousedown", BindAsEventListener(this, this.Start, fun)); }, //准备缩放 Start: function(e, fun, touch) { //防止冒泡(跟拖放配合时设置) e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true); //设置执行程序 this._fun = fun; //样式参数值 this._styleWidth = this._obj.clientWidth; this._styleHeight = this._obj.clientHeight; this._styleLeft = this._obj.offsetLeft; this._styleTop = this._obj.offsetTop; //四条边定位坐标 this._sideLeft = e.clientX - this._styleWidth; this._sideRight = e.clientX + this._styleWidth; this._sideUp = e.clientY - this._styleHeight; this._sideDown = e.clientY + this._styleHeight; //top和left定位参数 this._fixLeft = this._styleLeft + this._styleWidth; this._fixTop = this._styleTop + this._styleHeight; //缩放比例 if(this.Scale){ //设置比例 this.Ratio = Math.max(this.Ratio, 0) || this._styleWidth / this._styleHeight; //left和top的定位坐标 this._scaleLeft = this._styleLeft + this._styleWidth / 2; this._scaleTop = this._styleTop + this._styleHeight / 2; }; //范围限制 if(this.Max){ //设置范围参数 var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; //如果设置了容器,再修正范围参数 if(!!this._mxContainer){ mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); }; //根据最小值再修正 mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX); mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY); //由于转向时要重新设置所以写成function形式 this._mxSet = function(){ this._mxRightWidth = mxRight - this._styleLeft - this._borderX; this._mxDownHeight = mxBottom - this._styleTop - this._borderY; this._mxUpHeight = Math.max(this._fixTop - mxTop, this.Min ? this.minHeight : 0); this._mxLeftWidth = Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth : 0); }; this._mxSet(); //有缩放比例下的范围限制 if(this.Scale){ this._mxScaleWidth = Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft - this._borderX) * 2; this._mxScaleHeight = Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop - this._borderY) * 2; }; }; //mousemove时缩放 mouseup时停止 addEventHandler(document, "mousemove", this._fR); addEventHandler(document, "mouseup", this._fS); if(isIE){ addEventHandler(this._obj, "losecapture", this._fS); this._obj.setCapture(); }else{ addEventHandler(window, "blur", this._fS); e.preventDefault(); }; }, //缩放 Resize: function(e) { //清除选择 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //执行缩放程序 this._fun(e); //设置样式,变量必须大于等于0否则ie出错 with(this._obj.style){ width = this._styleWidth + "px"; height = this._styleHeight + "px"; top = this._styleTop + "px"; left = this._styleLeft + "px"; } //附加程序 this.onResize(); }, //缩放程序 //上 Up: function(e) { this.RepairY(this._sideDown - e.clientY, this._mxUpHeight); this.RepairTop(); this.TurnDown(this.Down); }, //下 Down: function(e) { this.RepairY(e.clientY - this._sideUp, this._mxDownHeight); this.TurnUp(this.Up); }, //右 Right: function(e) { this.RepairX(e.clientX - this._sideLeft, this._mxRightWidth); this.TurnLeft(this.Left); }, //左 Left: function(e) { this.RepairX(this._sideRight - e.clientX, this._mxLeftWidth); this.RepairLeft(); this.TurnRight(this.Right); }, //右下 RightDown: function(e) { this.RepairAngle( e.clientX - this._sideLeft, this._mxRightWidth, e.clientY - this._sideUp, this._mxDownHeight ); this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp); }, //右上 RightUp: function(e) { this.RepairAngle( e.clientX - this._sideLeft, this._mxRightWidth, this._sideDown - e.clientY, this._mxUpHeight ); this.RepairTop(); this.TurnLeft(this.LeftUp) || this.Scale || this.TurnDown(this.RightDown); }, //左下 LeftDown: function(e) { this.RepairAngle( this._sideRight - e.clientX, this._mxLeftWidth, e.clientY - this._sideUp, this._mxDownHeight ); this.RepairLeft(); this.TurnRight(this.RightDown) || this.Scale || this.TurnUp(this.LeftUp); }, //左上 LeftUp: function(e) { this.RepairAngle( this._sideRight - e.clientX, this._mxLeftWidth, this._sideDown - e.clientY, this._mxUpHeight ); this.RepairTop(); this.RepairLeft(); this.TurnRight(this.RightUp) || this.Scale || this.TurnDown(this.LeftDown); }, //修正程序 //水平方向 RepairX: function(iWidth, mxWidth) { iWidth = this.RepairWidth(iWidth, mxWidth); if(this.Scale){ var iHeight = this.RepairScaleHeight(iWidth); if(this.Max && iHeight > this._mxScaleHeight){ iHeight = this._mxScaleHeight; iWidth = this.RepairScaleWidth(iHeight); }else if(this.Min && iHeight < this.minHeight){ var tWidth = this.RepairScaleWidth(this.minHeight); if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; } } this._styleHeight = iHeight; this._styleTop = this._scaleTop - iHeight / 2; } this._styleWidth = iWidth; }, //垂直方向 RepairY: function(iHeight, mxHeight) { iHeight = this.RepairHeight(iHeight, mxHeight); if(this.Scale){ var iWidth = this.RepairScaleWidth(iHeight); if(this.Max && iWidth > this._mxScaleWidth){ iWidth = this._mxScaleWidth; iHeight = this.RepairScaleHeight(iWidth); }else if(this.Min && iWidth < this.minWidth){ var tHeight = this.RepairScaleHeight(this.minWidth); if(tHeight < mxHeight){ iWidth = this.minWidth; iHeight = tHeight; } } this._styleWidth = iWidth; this._styleLeft = this._scaleLeft - iWidth / 2; } this._styleHeight = iHeight; }, //对角方向 RepairAngle: function(iWidth, mxWidth, iHeight, mxHeight) { iWidth = this.RepairWidth(iWidth, mxWidth); if(this.Scale){ iHeight = this.RepairScaleHeight(iWidth); if(this.Max && iHeight > mxHeight){ iHeight = mxHeight; iWidth = this.RepairScaleWidth(iHeight); }else if(this.Min && iHeight < this.minHeight){ var tWidth = this.RepairScaleWidth(this.minHeight); if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; } } }else{ iHeight = this.RepairHeight(iHeight, mxHeight); } this._styleWidth = iWidth; this._styleHeight = iHeight; }, //top RepairTop: function() { this._styleTop = this._fixTop - this._styleHeight; }, //left RepairLeft: function() { this._styleLeft = this._fixLeft - this._styleWidth; }, //height RepairHeight: function(iHeight, mxHeight) { iHeight = Math.min(this.Max ? mxHeight : iHeight, iHeight); iHeight = Math.max(this.Min ? this.minHeight : iHeight, iHeight, 0); return iHeight; }, //width RepairWidth: function(iWidth, mxWidth) { iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth); iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0); return iWidth; }, //比例高度 RepairScaleHeight: function(iWidth) { return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0); }, //比例宽度 RepairScaleWidth: function(iHeight) { return Math.max(Math.round((iHeight + this._borderY) * this.Ratio - this._borderX), 0); }, //转向程序 //转右 TurnRight: function(fun) { if(!(this.Min || this._styleWidth)){ this._fun = fun; this._sideLeft = this._sideRight; this.Max && this._mxSet(); return true; } }, //转左 TurnLeft: function(fun) { if(!(this.Min || this._styleWidth)){ this._fun = fun; this._sideRight = this._sideLeft; this._fixLeft = this._styleLeft; this.Max && this._mxSet(); return true; } }, //转上 TurnUp: function(fun) { if(!(this.Min || this._styleHeight)){ this._fun = fun; this._sideDown = this._sideUp; this._fixTop = this._styleTop; this.Max && this._mxSet(); return true; } }, //转下 TurnDown: function(fun) { if(!(this.Min || this._styleHeight)){ this._fun = fun; this._sideUp = this._sideDown; this.Max && this._mxSet(); return true; } }, //停止缩放 Stop: function() { removeEventHandler(document, "mousemove", this._fR); removeEventHandler(document, "mouseup", this._fS); if(isIE){ removeEventHandler(this._obj, "losecapture", this._fS); this._obj.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); } } };
ImgCropper.htm 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 图片截取效果</title> </head> <body> <script type="text/javascript"> var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); } } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; //图片切割 var ImgCropper = Class.create(); ImgCropper.prototype = { //容器对象,控制层,图片地址 initialize: function(container, handle, url, options) { this._Container = $(container);//容器对象 this._layHandle = $(handle);//控制层 this.Url = url;//图片地址 this._layBase = this._Container.appendChild(document.createElement("img"));//底层 this._layCropper = this._Container.appendChild(document.createElement("img"));//切割层 this._layCropper.onload = Bind(this, this.SetPos); //用来设置大小 this._tempImg = document.createElement("img"); this._tempImg.onload = Bind(this, this.SetSize); this.SetOptions(options); this.Opacity = Math.round(this.options.Opacity); this.Color = this.options.Color; this.Scale = !!this.options.Scale; this.Ratio = Math.max(this.options.Ratio, 0); this.Width = Math.round(this.options.Width); this.Height = Math.round(this.options.Height); //设置预览对象 var oPreview = $(this.options.Preview);//预览对象 if(oPreview){ oPreview.style.position = "relative"; oPreview.style.overflow = "hidden"; this.viewWidth = Math.round(this.options.viewWidth); this.viewHeight = Math.round(this.options.viewHeight); //预览图片对象 this._view = oPreview.appendChild(document.createElement("img")); this._view.style.position = "absolute"; this._view.onload = Bind(this, this.SetPreview); } //设置拖放 this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true }); //设置缩放 this.Resize = !!this.options.Resize; if(this.Resize){ var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) }); //设置缩放触发对象 op.RightDown && (_resize.Set(op.RightDown, "right-down")); op.LeftDown && (_resize.Set(op.LeftDown, "left-down")); op.RightUp && (_resize.Set(op.RightUp, "right-up")); op.LeftUp && (_resize.Set(op.LeftUp, "left-up")); op.Right && (_resize.Set(op.Right, "right")); op.Left && (_resize.Set(op.Left, "left")); op.Down && (_resize.Set(op.Down, "down")); op.Up && (_resize.Set(op.Up, "up")); //最小范围限制 this.Min = !!this.options.Min; this.minWidth = Math.round(this.options.minWidth); this.minHeight = Math.round(this.options.minHeight); //设置缩放对象 this._resize = _resize; } //设置样式 this._Container.style.position = "relative"; this._Container.style.overflow = "hidden"; this._layHandle.style.zIndex = 200; this._layCropper.style.zIndex = 100; this._layBase.style.position = this._layCropper.style.position = "absolute"; this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;//对齐 //初始化设置 this.Init(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//图片高度 Height: 0,//图片高度 //缩放触发对象 Resize: false,//是否设置缩放 Right: "",//右边缩放对象 Left: "",//左边缩放对象 Up: "",//上边缩放对象 Down: "",//下边缩放对象 RightDown: "",//右下缩放对象 LeftDown: "",//左下缩放对象 RightUp: "",//右上缩放对象 LeftUp: "",//左上缩放对象 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) //预览对象设置 Preview: "",//预览对象 viewWidth: 0,//预览宽度 viewHeight: 0//预览高度 }; Extend(this.options, options || {}); }, //初始化对象 Init: function() { //设置背景色 this.Color && (this._Container.style.backgroundColor = this.Color); //设置图片 this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url; //设置透明 if(isIE){ this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")"; } else { this._layBase.style.opacity = this.Opacity / 100; } //设置预览对象 this._view && (this._view.src = this.Url); //设置缩放 if(this.Resize){ with(this._resize){ Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight; } } }, //设置切割样式 SetPos: function() { //ie6渲染bug if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; }; //获取位置参数 var p = this.GetPos(); //按拖放对象的参数进行切割 this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; //设置预览 this.SetPreview(); }, //设置预览效果 SetPreview: function() { if(this._view){ //预览显示的宽和高 var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; //按比例设置参数 var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale; //设置预览对象 with(this._view.style){ //设置样式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割预览图 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } } }, //设置图片大小 SetSize: function() { var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图和切割图 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; //设置拖放范围 this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; //设置缩放范围 if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } }, //获取当前样式 GetPos: function() { with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } }, //获取尺寸 GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) { var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸对象 return { Width: iWidth, Height: iHeight } } } </script> <script type="text/javascript" src="Drag.js"></script> <script type="text/javascript" src="Resize.js"></script> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute; background:#FFF; border: 1px solid #333; width: 6px; height: 6px; z-index:500; font-size:0; opacity: 0.5; filter:alpha(opacity=50); } #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;} #rUp,#rDown{cursor:n-resize;} #rLeftDown{left:-4px;bottom:-4px;} #rRightUp{right:-4px;top:-4px;} #rRightDown{right:-4px;bottom:-4px;background-color:#00F;} #rLeftUp{left:-4px;top:-4px;} #rRight{right:-4px;top:50%;margin-top:-4px;} #rLeft{left:-4px;top:50%;margin-top:-4px;} #rUp{top:-4px;left:50%;margin-left:-4px;} #rDown{bottom:-4px;left:50%;margin-left:-4px;} #bgDiv{width:300px; height:400px; border:1px solid #666666; position:relative;} #dragDiv{border:1px dashed #fff; width:100px; height:60px; top:50px; left:50px; cursor:move; } </style> <table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="300"><div id="bgDiv"> <div id="dragDiv"> <div id="rRightDown"> </div> <div id="rLeftDown"> </div> <div id="rRightUp"> </div> <div id="rLeftUp"> </div> <div id="rRight"> </div> <div id="rLeft"> </div> <div id="rUp"> </div> <div id="rDown"></div> </div> </div></td> <td align="center"><div id="viewDiv" style="width:300px; height:300px;"> </div></td> </tr> </table> <br /> <input id="idSize" type="button" value="缩小显示" /> <input id="idOpacity" type="button" value="全透明" /> <input id="idColor" type="button" value="白色背景" /> <input id="idScale" type="button" value="使用比例" /> <input id="idMin" type="button" value="设置最小尺寸" /> <input id="idView" type="button" value="缩小预览" /> <input id="idImg" type="button" value="换图片" /> <br /><br /> 图片地址:<input id="idPicUrl" type="text" value="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg" /> <input id="idPic" type="button" value="换图" /> <script> var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", { Width: 300, Height: 400, Color: "#000", Resize: true, Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown", RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp", Preview: "viewDiv", viewWidth: 300, viewHeight: 300 }) $("idSize").onclick = function(){ if(ic.Height == 200){ ic.Height = 400; this.value = "缩小显示"; }else{ ic.Height = 200; this.value = "还原显示"; } ic.Init(); } $("idOpacity").onclick = function(){ if(ic.Opacity == 0){ ic.Opacity = 50; this.value = "全透明"; }else{ ic.Opacity = 0; this.value = "半透明"; } ic.Init(); } $("idColor").onclick = function(){ if(ic.Color == "#000"){ ic.Color = "#fff"; this.value = "白色背景"; }else{ ic.Color = "#000"; this.value = "黑色背景"; } ic.Init(); } $("idScale").onclick = function(){ if(ic.Scale){ ic.Scale = false; this.value = "使用比例"; }else{ ic.Scale = true; this.value = "取消比例"; } ic.Init(); } $("idMin").onclick = function(){ if(ic.Min){ ic.Min = false; this.value = "设置最小尺寸"; }else{ ic.Min = true; this.value = "取消最小尺寸"; } ic.Init(); } $("idView").onclick = function(){ if(ic.viewWidth == 200){ ic.viewWidth = 300; this.value = "缩小预览"; }else{ ic.viewWidth = 200; this.value = "扩大预览"; } ic.Init(); } $("idImg").onclick = function(){ if(ic.Url == "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg"){ ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg"; }else{ ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg"; } ic.Init(); } $("idPic").onclick = function(){ if($("idPicUrl").value){ ic.Url = $("idPicUrl").value; } ic.Init(); } </script> </body> </html>
2010年7月04日 23:36
相关推荐
总结,"jsp头像上传编辑截取实例"是一个结合了前端交互与后端处理的综合项目,涵盖了文件上传、文件存储、图片处理、数据库操作等多个方面。通过实践这样的实例,开发者不仅可以提升对JSP和相关技术的理解,还能更好...
【标题】"jsp头像上传仿flash效果"指的是在JavaServer Pages (JSP) 中实现一个用户头像上传的功能,并且这个功能在视觉效果上模仿了经典的Flash技术。Flash曾经是网页动态效果和多媒体交互的主要工具,但在现代网页...
通过这些资源,开发者可以构建一个完整的头像上传组件,让用户能够像在新浪微博一样方便地上传和编辑自己的头像。 总结来说,"仿新浪微博头像上传"是一个基于Flash技术的用户界面功能,涉及到ActionScript编程、...
《Flash富头像上传编辑器详解》 在互联网应用中,个性化的头像是用户自我表达的重要方式之一。"Flash富头像上传编辑器"正是为了满足这一需求而设计的工具,它提供了一种高效且易用的方式来定制和上传头像。这款编辑...
"jsp文件上传源代码"这个标题表明我们正在讨论如何在JSP中实现文件上传的功能,这在很多web应用中是必不可少的,例如用户提交个人资料时上传头像,或者在企业系统中上传文档等。 文件上传功能通常涉及到HTTP协议中...
前段用html,css加js,后端使用ImageMagicK来进行图片处理,为了方便运行deom程序,里面上传文件以及最终的图片裁减是用jsp来实现的,当然可以使用别的。如果想要运行demo的话,请把压缩包useravtar.rar,解压到...
【标题】"Flash富头像上传编辑器(适用ASP/ASP.NET/JSP/PHP) 1.6"是一个专门设计用于网站用户头像上传和编辑的软件工具,它支持多种服务器端编程语言,包括ASP、ASP.NET、JSP和PHP。这个编辑器利用Flash技术,提供了...
flash上传头像预览裁剪-主要用于上传用户头像,然后可以实现在线编辑图片存储为不同像素 安装及部署: 1. 上传到 apache,iis,tomcat 服务器,通过域名访问 index.html 例如:http://localhost/index.html v1.5 ...
上传并预览,用户可以任意选择区域,支持头像旋转 2.无论图片过大还是过小,都可以按照固定大小显示 3.支持头像拍照保存 4.支持Asp/php/Jsp/Asp.Net等语言的任意调用 5.兼容性好,任何浏览器都正常使用...
富头像上传编辑器 v1.4,可以支持asp,.net,php,jsp等,富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等... 小巧的身材:文件大小仅仅...
Servlet接收上传文件,将其保存到服务器的指定目录,并将路径信息存入数据库,以便在JSP页面中展示。 - **权限管理**:通过Servlet实现用户角色划分,例如普通用户只能阅读和评论,而管理员可以发布、编辑和删除文章...
本范例代码主要展示了如何利用JSP和Servlet实现图片上传、月历制作以及水印输出的功能,这对于理解Web开发中的文件操作和图像处理具有重要的学习价值。 首先,我们要了解JSP与Servlet的关系。JSP是一种基于Java的...
6. **表单提交与处理**:HTML表单用于用户输入,通过POST或GET方法提交到服务器,JSP处理表单数据并可能更新数据库。 7. **文件上传**:使用`<input type="file">`和相关的Java API(如Commons FileUpload库)处理...
- 在表单中,用户可能需要上传头像、身份证照片、合同文件等。 - 在文章发布系统中,用户可以上传图片和附件来丰富内容。 - 在产品展示页面,用户可以上传产品图片进行展示。 5. **注意事项**: - 上传文件时,...
富头像上传编辑器最新官方版,可以支持asp,.net,php,jsp等,富头像上传编辑器是一款支持本地上传、预览、视频拍照和网络加载的flash头像编辑上传插件,可缩放、裁剪、旋转、定位和调色等... 小巧的身材:文件大小...
在这个“blog.rar”压缩包中,我们可以找到一个基于JSP(JavaServer Pages)技术构建的个人博客系统,其核心特性包括图片上传和浏览功能,这在现代博客系统中是非常重要的。 **1. JSP技术基础** JSP是Java的一种...
这个名为"图片上传、裁剪"的压缩包提供的是一个示例(demo),用于演示如何实现图片上传并具备裁剪、放大和缩小等功能。下面我们将深入探讨这些技术及其在实际开发中的应用。 一、图片上传 1. HTML5 File API:现代...
2. **个人信息管理**:用户可以编辑自己的资料,上传头像,设置兴趣爱好等。 3. **搜索和匹配**:系统提供用户搜索其他用户的功能,可能基于地理位置、兴趣爱好等条件进行匹配。 4. **好友系统**:添加、删除好友...
【校园摄影比赛网站_jsp.zip】是一个包含了一个基于Java Web技术的校园摄影比赛网站的源代码压缩包。这个项目主要用于展示学生们的摄影作品,并提供在线投票和评分功能,从而促进校园内的艺术交流。该项目使用了...
- **用户资料管理**:用户可以编辑个人资料,上传头像等,这些信息通常存储在数据库的用户表中。 - **权限控制**:根据用户角色(如管理员、普通用户)分配不同的操作权限。 在分析和实现JSP在线交流系统时,还...