1.前端剪切效果使用jquery+js+div+css实现
其中有个js图片剪切插件叫ImgCropper,吃插件与jquery插件一起使用会有bug,被我修改后能兼容jquery了
如果需要了解更多关于ImgCropper插件使用,请查看源码或百度看例子吧
下面是我修改后的ImgCropper+Resize+Drag的集成代码,使用时只需将代码打包后,通过script标签引用即可
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var $getElem = 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 = $getElem(container);//容器对象
this._layHandle = $getElem(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 = $getElem(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; }
/*2015-9-6 15:45:16修改by wqj*/
if(this.Resize){ this._resize.mxRight = Math.round(s.Width); this._resize.mxBottom = Math.round(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 }
}
};
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象
initialize: function(drag, options) {
this.Drag = $getElem(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 = $getElem(this.options.Handle) || this.Drag;
this._mxContainer = $getElem(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();
}
};
//缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj, options) {
this._obj = $getElem(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 = $getElem(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 = $getElem(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);
}
}
};
2.头像剪切页面我也进行了一些部件,布局样式是参考了百度头像上传布局,上传图片使用了ajaxFileUpload.js插件
需要注意的是:
a.ajaxFileUpload插件上传图片,服务端返回的json时,response需要设置contentType为text/html;charset=UTF-8,不然ajaxFileUpload插件不会静success回调方法,调试ajaxFileUpload可以看返回的json被加上了pre标签,也可以在uploadHttpData属性定义里将pre标签去除
b.使用ajaxFileUpload插件时,还可能遇见一个错误就是jQuery.handleError 方法未定义,由于jquery1.4.2以后的版本都把这个方法去掉了,所以需要我们自己将1.4.1版本的handleError方法copy到jquery架包中或ajaxFileUpload架包中,我是copy到ajaxFileUpload架包中的
添加handleError方法后的ajaxFileUpload代码:
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = s.fileElementId;
var form = jQuery.createUploadForm(id, s.fileElementId);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function()
{ try
{
$(io).remove();
$(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
// var io = $('#' + frameId);
var form = $('#' + formId);
$(form).attr('action', s.url);
$(form).attr('method', 'POST');
$(form).attr('target', frameId);
if(form.encoding)
{
form.encoding = 'multipart/form-data';
}
else
{
form.enctype = 'multipart/form-data';
}
$(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
}
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
//alert($('param', data).each(function(){alert($(this).attr('value'));}));
return data;
},
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}
});
页面布局如下
截取页面布局源码
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" ></c:set>
<!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>
<title>图片裁剪及上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,input,label,span,img{margin: 0px;padding: 0px; list-style:none outside none;}
body,button,input,select,textarea{font:12px/1.5 Tahoma,Helvetica,Arial,"宋体",sans-serif; color:#333;}
a{ text-decoration:none;color:#333;}
a:hover{text-decoration:none;color:#C00;}
.passPortraitWrapper{
}
.passPortraitBox{
width:680px;
margin:0px auto;
padding:10px;
overflow:hidden;
}
.passPortraitLeftSide{
display:inline;
float:left;
width:440px;
}
.selectPortaitLabel{
position:relative;
padding-bottom:10px;
}
.portraitFile{
height:38px;
line-height:38px;
width:130px;
position:absolute;
left:0px;
overflow:hidden;
font-size:24px;
opacity: 0;
filter: alpha(opacity=0);
}
.portraitBtn{
height:38px;
line-height:38px;
width:130px;
border: medium none;
background: transparent url('${ctxPath}/resources/images/ImgCropper/crop_img_sprite.png') no-repeat scroll 0% 0%;
}
.selectPortraitBtn{
background-position:0px 0px;
color:#666;
}
.selectPortaitNote{
display:inline-block;
position:absolute;
font-size:12px;
height:24px;
line-height:24px;
color:#999;
text-align:left;
top: 8px;
left: 140px;
}
.portraitFilePath{
display:block;
color:#999;
line-height:20px;
}
.portraitBox{
height:300px;
width:440px;
overflow:auto;
}
.portraitBG{
height:300px;
line-height:300px;
width:400px;
background:#E2E2E2 none repeat scroll 0% 0%;
position:absolute;
}
.portraitLoad{
height:16px;
width:16px;
font-size:0px;
position:absolute;
top:142px;
left:192px;
z-index:100;
}
.portraitPosition{
position: relative;
left: 50%;
top: 50%;
}
.portraitSelection{
width: 404px;
height: 304px;
position: absolute;
top: -2px;
left: -2px;
cursor: crosshair;
z-index: 290;
}
.portraitImg{
}
.okPortraitLabel{
padding-top:10px;
position:relative;
}
.okPortraitBtn{
background-position:0px -38px;
color:#fefefe;
}
.okPortraitBtn_disable{
background-position:0px -151px;
}
.passPortraitRightSide{
display:inline;
float:right;
width:180px;
height:390px;
border-left:1px solid #E5E5E5;
padding-left:36px;
margin-left:10px;
position:relative;
}
.portraitPreviewBox{
position:absolute;
top:0px;
}
.portraitPreviewLabel{
height:38px;
line-height:38px;
font-size:14px;
color:#666;
}
.portraitPreviewContent{
height:160px;
width:160px;
border:1px dashed #000;
}
.portraitPresetBox{
position:absolute;
bottom:0px;
}
.portraitPresetLabel{
height:38px;
line-height:38px;
font-size:14px;
color:#666;
}
.portraitPresetContent{
width:180px;
height:80px;
overflow:hidden;
position:relative;
border:1px solid #eee;
}
.portraitPresetUl{
width:1000px;
}
.portraitPresetLi{
height:80px;
width:80px;
float:left;
}
.portraitPresetArrowBox{
width:180px;
position:absolute;
right:0px;
top:0px;
}
.portraitPresetArrow{
width:16px;
height:16px;
position:absolute;
}
.portraitPresetPrep{
background:url('${ctxPath}/resources/images/ImgCropper/previous.png') no-repeat;
left:0px;
top:32px
}
.portraitPresetNext{
background:url('${ctxPath}/resources/images/ImgCropper/next.png') no-repeat;
right:0px;
top:32px
}
.portraitPresetArrowBG{
width:16px;
height:80px;
position:absolute;
top:0px;
}
.portraitPresetPrepBG{
background:#777;
left:0px;
}
.portraitPresetNextBG{
background:#777;
right:0px;
}
.msg_content{
height:20px;
line-height:20px;
text-align:left;
color:#999;
position:absolute;
padding-left:20px;
top:18px;
left:140px;
}
.msg_icon{
width:16px;
height:16px;
font-size:0px;
position:absolute;
top:2px;
left:2px;
}
.msg_icon_ok{
background:url('${ctxPath}/resources/images/icons/ok.gif') no-repeat;
}
.msg_icon_warning{
background:url('${ctxPath}/resources/images/icons/warning.gif') no-repeat;
}
.msg_icon_info{
background:url('${ctxPath}/resources/images/icons/info.gif') no-repeat;
}
.imgViewBG{
height:300px;
background:#E2E2E2;
position:relative;
}
#imgView{
}
/*页签布局开始*/
.tab_wrap{
}
.tab_nav_group{
background:#ccc;
overflow:hidden;
}
.tab_nav_ul{
}
.tab_nav_li{
height:24px;
line-height:24px;
padding:0px 10px;
border-right:1px solid #999;
float:left;
cursor:pointer;
}
.tab_nav_cuur{
background:#fff;
}
.tab_content{
overflow:hidden;
}
/*页签布局结束*/
#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{position:relative;}
#dragDiv{border:1px dashed #000; width:100px; height:100px; top:0px; left:0px; cursor:move;position:absolute; }
</style>
<!-- 导入js架包 -->
<script type="text/javascript" src="${ctxPath}/resources/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${ctxPath}/resources/js/ImgCropper/ImgCropper-integration.js" ></script>
<script type="text/javascript" src="${ctxPath}/resources/js/util/ajaxFileUpload.js" ></script>
<script type="text/javascript" src="${ctxPath}/resources/js/imgReady/imgReady.js" ></script>
<script type="text/javascript">
var requestObj = {
attachAction:"${ctxPath}/uploadController?action=uploadAttach",
clipAction:"${ctxPath}/uploadController?action=clipImg"
};
var backImage = {id:"",url:"",clipId:"",clipUrl:""};
//页签标记
var tabFlag = 0;
var msgObj = {
'0': '成功上传图片',
'1': '图片剪切成功',
'2': '请选择裁剪区域',
'3': '请上传正确格式图片',
'4': '上传文件异常',
errnoErrno: 5,
successErrno: 0,
errnoPortraitMsg: '获取图片失败',
errImgMsg: '请上传正确格式图片',
errCropMsg: '请选择裁剪区域',
errUploadMsg: '上传失败'
};
var ic , scale = 1;
/* function selectImgFile(){
document.getElementById("fileImg").click();
} */
function uploadImg(file){
var fileId = file.id;
if(!validateImg(file)){
return;
}
if(tabFlag == 0){
$("#portraitLoad1").css("display","block");
$("#bgDiv").css("display","none");
}else{
$("#portraitLoad2").css("display","block");
$("#imgView").css("display","none");
}
$.ajaxFileUpload({
url: requestObj.attachAction,
fileElementId: fileId,
dataType: 'json',
data: {},
success: function (m, l) {
if (m.errno == msgObj.successErrno) {
backImage.id = m.picId;
backImage.clipId = m.picId;
backImage.url = decodeURIComponent(decodeURIComponent(m.portraitUrl));
backImage.clipUrl = decodeURIComponent(decodeURIComponent(m.portraitUrl));
if(tabFlag == 0){
showCrop();
$("#clip_ok").removeClass("okPortraitBtn_disable");
$("#file_btn1").val("重新选择");
}else{
showImgView();
$("#upload_ok").removeClass("okPortraitBtn_disable");
$("#file_btn2").val("重新选择");
}
showPromptInfo(m.errno, "");
} else {
if (m.errno == 1) {
showPromptInfo(m.errno, msgObj.errUploadMsg);
} else {
showPromptInfo(m.errno, msgObj[m.errno] || msgObj.errUploadMsg);
}
}
}
});
}
function showCrop(){
$("#portraitLoad1").css("display","none");
var url = backImage.clipUrl;
var containerWidth = 400;
var containerHeight = 300;
var widthScale = 1.0 ,heightScale = 1.0;
//图片在div中的高宽度
var imgBoxHeight = 0,imgBoxWidth = 0;
//图片的实际高宽
var imgHeight = 0;
var imgWidth = 0;
//加载图片高度宽度
imgReady(url,function(){
imgHeight = this.height;
imgWidth = this.width;
if(imgHeight > 0 && imgWidth > 0){
widthScale = containerWidth / imgWidth;
heightScale = containerHeight / imgHeight;
}
if(widthScale >= heightScale){
scale = heightScale;
}else{
scale = widthScale;
}
imgBoxHeight = Math.round(scale * imgHeight);
imgBoxWidth = Math.round(scale * imgWidth);
$("#bgDiv").width(imgBoxWidth);
$("#bgDiv").height(imgBoxHeight);
$("#bgDiv").css("margin-left",-imgBoxWidth / 2);
$("#bgDiv").css("margin-top",-imgBoxHeight / 2);
$("#bgDiv").css("display","block");
var dragDivHtmlStr = ''+
'<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>';
var dragDivObj = $(dragDivHtmlStr);
$("#bgDiv").html("");
$("#bgDiv").append(dragDivObj);
//移除原有的img标签
$("#bgDiv").find("img").remove();
$("#viewDiv").find("img").remove();
ic = new ImgCropper("bgDiv", "dragDiv", url, {
Width: imgBoxWidth, Height: imgBoxHeight , Color: "#FFF",
Resize: true,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
Preview: "viewDiv", viewWidth: 160, viewHeight: 160
});
});
}
function showImgView(){
$("#portraitLoad2").css("display","none");
var url = backImage.url;
var containerWidth = 400;
var containerHeight = 300;
var widthScale = 1.0 ,heightScale = 1.0;
var imgBoxHeight = 0,imgBoxWidth = 0;
//图片的实际高宽
var imgHeight = 0;
var imgWidth = 0;
//加载图片高度宽度
imgReady(url,function(){
imgHeight = this.height;
imgWidth = this.width;
if(imgHeight > 0 && imgWidth > 0){
widthScale = containerWidth / imgWidth;
heightScale = containerHeight / imgHeight;
}
if(widthScale >= heightScale){
scale = heightScale;
}else{
scale = widthScale;
}
imgBoxHeight = Math.round(scale * imgHeight);
imgBoxWidth = Math.round(scale * imgWidth);
$("#imgView").width(imgBoxWidth);
$("#imgView").height(imgBoxHeight);
$("#imgView").css("margin-left",-imgBoxWidth / 2);
$("#imgView").css("margin-top",-imgBoxHeight / 2);
$("#imgView").css("display","block");
$("#imgView").html("");
var img = $("<img src=''/>");
img.attr("height",imgBoxHeight);
img.attr("width",imgBoxWidth);
img.attr("src",url);
$("#imgView").append(img);
});
}
function showPromptInfo(errno,msg){
if(!msg){
msg = msgObj[errno];
}
if(tabFlag == 0){
$("#msg_content1").find("span").text(msg);
$("#msg_content1").find("i").removeClass();
$("#msg_content1").find("i").addClass("msg_icon");
if(errno == msgObj.successErrno){
$("#msg_content1").find("i").addClass("msg_icon_ok");
}else if(errno == msgObj.errnoErrno){
$("#msg_content1").find("i").addClass("msg_icon_warning");
}else{
$("#msg_content1").find("i").addClass("msg_icon_info");
}
$("#msg_content1").css("display","block");
setTimeout("hiddenDiv('msg_content1')",1000);
}else{
$("#msg_content2").find("span").text(msg);
$("#msg_content2").find("i").removeClass();
$("#msg_content2").find("i").addClass("msg_icon");
if(errno == msgObj.successErrno){
$("#msg_content2").find("i").addClass("msg_icon_ok");
}else if(errno == msgObj.errnoErrno){
$("#msg_content2").find("i").addClass("msg_icon_warning");
}else{
$("#msg_content2").find("i").addClass("msg_icon_info");
}
$("#msg_content2").css("display","block");
setTimeout("hiddenDiv('msg_content2')",1000);
}
}
function hiddenDiv(divId){
$("#"+divId).css("display","none");
}
//验证图片格式必须为jpg|jpeg|gif|png|bmp
function validateImg (j) {
h = j.value || '';
if (/^.*?\.(jpg|jpeg|gif|png|bmp)$/.test(h.toLowerCase())) {
return true;
} else {
showPromptInfo(msgObj.errnoErrno, msgObj.errImgMsg);
return false;
}
}
//js代码
$(document).ready(function(){
//点击页签切换内容
$(".tab_nav_li").click(function(){
var contentId = $(this).attr("cid");
if($(this).attr("id") && $(this).attr("id").indexOf("1") != -1){
tabFlag = 0 ;
}else{
tabFlag = 1;
}
$(".tab_content").css("display","none");
$(".tab_nav_li").removeClass("tab_nav_cuur");
$(this).addClass("tab_nav_cuur");
$("#"+contentId).css("display","block");
});
$("#clip_ok").click(function(){
if(!$(this).hasClass("okPortraitBtn_disable")){
var clipWidth = 0 , clipHeight = 0;
var clipTop = 0 , clipLeft = 0;
if(ic){
var posObj = ic.GetPos();
clipTop = Math.round(posObj.Top / scale);
clipLeft = Math.round(posObj.Left / scale);
clipWidth = Math.round(posObj.Width / scale);
clipHeight = Math.round(posObj.Height / scale);
if(clipWidth < 1 || clipHeight < 1 ){
showPromptInfo(2,"");
}else{
var picId = backImage.id;
var clipSubmitData = {attachId:picId,x:clipLeft,y:clipTop,width:clipWidth,height:clipHeight};
$.post(requestObj.clipAction, clipSubmitData, function(data){
if(data){
backImage.clipUrl = decodeURIComponent(decodeURIComponent(data.url));
showPromptInfo(data.errno,"");
$("#testImg").attr("src",backImage.clipUrl);
}
});
}
}else{
showPromptInfo(5,"请先选择需要剪切的图片");
}
}
});
$("#upload_ok").click(function(){
//判断是否有
if(!$(this).hasClass("okPortraitBtn_disable")){
showPromptInfo(0,"图片已保存");
$("#testImg").attr("src",backImage.clipUrl);
}
});
$(".portraitLoad").css("display","none");
$(".okPortraitBtn").addClass("okPortraitBtn_disable");
});
</script>
</head>
<body>
<div class="passPortraitWrapper">
<div class="tab_wrap">
<div class="tab_nav_group">
<ul class="tab_nav_ul">
<li class="tab_nav_li tab_nav_cuur" id="tab_1" cid="clip_img">图片剪切</li>
<li class="tab_nav_li" id="tab_2" cid="upload_img">图片上传</li>
</ul>
</div>
<div class="tab_content_group">
<div class="tab_content" style="display:block;" id="clip_img">
<div class="passPortraitBox">
<div class="passPortraitLeftSide">
<div class="selectPortaitLabel">
<input type="file" name="file" id="fileImg" class="portraitFile" οnchange="uploadImg(this)"/>
<input type="button" class="portraitBtn selectPortraitBtn" id="file_btn1" value="选择图片" οnclick=""/>
<span class="selectPortaitNote">支持jpg、jpeg、gif、png、bmp格式的图片</span>
</div>
<div id="imgPath" class="portraitFilePath"></div>
<div class="portraitBox">
<div class="portraitBG">
<div id="portraitLoad1" class="portraitLoad" >
<img src="${ctxPath}/resources/images/loading/zoomloader.gif" height="16" width="16" />
</div>
<div style="display:none;" class="portraitPosition" id="bgDiv">
</div>
</div>
</div>
<div class="okPortraitLabel" >
<input type="button" id="clip_ok" value="确定" class="portraitBtn okPortraitBtn okPortraitBtn_disable"/>
<span class="msg_content" id="msg_content1" ><i class="msg_icon" ></i><span></span></span>
</div>
</div>
<div class="passPortraitRightSide">
<div class="portraitPreviewBox">
<div class="portraitPreviewLabel">头像预览</div>
<div class="portraitPreviewContent" id="viewDiv"></div>
</div>
</div>
</div>
</div>
<div class="tab_content" style="display:none;" id="upload_img">
<div style="margin:0px auto;width:400px;padding:10px;">
<div class="selectPortaitLabel">
<input type="file" name="file" id="fileImg2" class="portraitFile" οnchange="uploadImg(this)"/>
<input type="button" class="portraitBtn selectPortraitBtn" id="file_btn2" value="选择图片" οnclick=""/>
<span class="selectPortaitNote">支持jpg、jpeg、gif、png、bmp格式的图片</span>
</div>
<div class="imgViewBG" >
<div id="portraitLoad2" class="portraitLoad" >
<img src="${ctxPath}/resources/images/loading/zoomloader.gif" height="16" width="16" />
</div>
<div id="imgView" style="display:none;position:absolute;z-index:200;background:#fff;left:50%;top:50%;"></div>
</div>
<div class="okPortraitLabel">
<input type="button" value="确定" id="upload_ok" class="portraitBtn okPortraitBtn okPortraitBtn_disable"/>
<span class="msg_content" id="msg_content2" ><i class="msg_icon" ></i><span></span></span>
</div>
</div>
</div>
</div>
</div>
<div class="portraitParmDiv">
</div>
</div>
<div style="clear:both;">
<img src="" id="testImg" />
</div>
<script type="text/javascript">
/* var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", {
Width: 224, Height: 300, Color: "#000",
Resize: true,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
Preview: "viewDiv", viewWidth: 160, viewHeight: 160
}); */
</script>
</body>
</html>
3.由于上传图片成功后,页面需要重新计算图片的高宽,保证能放入400*300的div中,还是用一个计算图片高宽的imgReady插件,源码来至于网络
代码如下:
// 更新:
// 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @see http://blog.phpdr.net/js-get-image-size.html
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload,置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
4.下面就是java服务端的servlet代码,服务端实现上传使用commons-fileupload-1.2.2.jar,commons-io-2.0.1.jar
下面是servlet的代码:
package com.wqjweb.controller;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import com.wqjweb.entry.Attachment;
import com.wqjweb.service.AttachmentService;
import com.wqjweb.util.date.DateUtil;
import com.wqjweb.util.file.FileUtil;
import com.wqjweb.util.image.ImgCutUtil;
import com.wqjweb.util.string.IDGenerator;
import com.wqjweb.util.string.StringUtil;
@Controller
public class UploadAttachController extends AutowiredHttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private AttachmentService attachmentService;
private ServletContext ctx;
private String savePath;
@Override
public void init(ServletConfig config) throws ServletException {
// 在web.xml中设置的一个初始化参数
savePath = config.getInitParameter("savePath");
ctx = config.getServletContext();
super.init(config);
}
/**
* @return the attachmentService
*/
public AttachmentService getAttachmentService() {
return attachmentService;
}
/**
* @param attachmentService the attachmentService to set
*/
public void setAttachmentService(AttachmentService attachmentService) {
this.attachmentService = attachmentService;
}
@Override
public void servlet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String action = StringUtil.trimStr(request.getParameter("action"));
if("uploadAction".equals(action)){
this.uploadAction(request, response);
}else if("test".equals(action)){
this.testResponse(request, response);
}else if("uploadAttach".equals(action)){
this.uploadAttach(request, response);
}else if("getAttachFile".equals(action)){
this.getAttachFile(request, response);
}else if("getImageFile".equals(action)){
this.getImageFile(request, response);
}else if("testURLDecoder".equals(action)){
this.testURLDecoder(request, response);
}else if("clipImg".equals(action)){
this.clipImg(request, response);
}
}
private void uploadAction(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
try{
List<FileItem> fileItemList = upload.parseRequest(request);
Iterator<FileItem> fileItemIter = fileItemList.iterator();
while(fileItemIter.hasNext()){
FileItem fileItem = fileItemIter.next();
//判断是否表单提交的参数
if(fileItem.isFormField()){
System.out.println("表单参数名:"+fileItem.getFieldName()+"属性值:"+fileItem.getString("utf-8"));
}else{
if(!"".equals(fileItem.getName())){
System.out.println("文件大小:"+fileItem.getSize());
System.out.println("文件类型:"+fileItem.getContentType());
System.out.println("文件名称:"+fileItem.getName());
String rootPath = ctx.getRealPath("/");
System.out.println("项目根目录:"+rootPath);
File tempFile = new File(rootPath+savePath,fileItem.getName());
//判断父目录是否存在,不存在就创建
mkdir(tempFile.getParentFile());
fileItem.write(tempFile);
request.setAttribute("uploadMsg", "上传文件成功!");
System.out.println("上传成功!");
}else{
request.setAttribute("uploadMsg", "没有选择上传文件!");
System.out.println("没有选择上传文件!");
}
}
}
}catch(Exception e){
e.printStackTrace();
request.setAttribute("uploadMsg", "上传文件失败!");
}
Attachment attachment = new Attachment();
attachment.setAttachName("测试2");
attachment.setAttachPath("F:\\CC.txt");
attachment.setAttachSize(20);
attachment.setAttachSuffix("txt");
attachment.setCreateDate(DateUtil.getCurrDateStr());
attachment.setId(IDGenerator.getUniqueID());
attachment.setUserId(IDGenerator.getUniqueID());
int count = attachmentService.save(attachment);
System.out.println("path:"+savePath);
System.out.println("count:"+count);
JSONObject jsonObj = new JSONObject();
jsonObj.put("code", "100");
jsonObj.put("msg", "上传成功!");
System.out.println(jsonObj.toString());
response.getWriter().write(jsonObj.toString());
}
private void testURLDecoder(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String testStr = StringUtil.trimStr(request.getParameter("testStr"));
System.out.println(testStr);
System.out.println(new String(testStr.getBytes("ISO8859_1"),"UTF-8"));
System.out.println(URLDecoder.decode(testStr, "ISO8859_1"));
System.out.println(URLDecoder.decode(testStr, "UTF-8"));
}
private void uploadAttach(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
JSONObject resultJson = new JSONObject();
try{
List<FileItem> fileItemList = upload.parseRequest(request);
Iterator<FileItem> fileItemIter = fileItemList.iterator();
while(fileItemIter.hasNext()){
FileItem fileItem = fileItemIter.next();
//判断是否表单提交的参数
if(fileItem.isFormField()){
System.out.println("表单参数名:"+fileItem.getFieldName()+"属性值:"+fileItem.getString("utf-8"));
}else{
if(!"".equals(fileItem.getName())){
System.out.println("文件大小:"+fileItem.getSize());
System.out.println("文件类型:"+fileItem.getContentType());
System.out.println("文件名称:"+fileItem.getName());
//表单上传的文档名称
String pathName = fileItem.getName();
String fileFullName = FileUtil.getFileFullName(pathName);
String fileSimpleName = fileFullName;
if(!"".equals(FileUtil.getFileSimpleName(fileFullName))){
fileSimpleName = FileUtil.getFileSimpleName(fileFullName);
}
String rootPath = ctx.getRealPath("/");
String filePath = rootPath+savePath + File.separator + fileFullName;
System.out.println("文件路径:"+filePath);
File tempFile = new File(filePath);
Attachment attachment = new Attachment();
attachment.setId(IDGenerator.getUniqueID());
attachment.setAttachName(fileSimpleName);
attachment.setAttachSuffix(FileUtil.getFileSuffix(fileFullName));
attachment.setAttachPath(filePath);
attachment.setCreateDate(DateUtil.getCurrDateStr());
attachment.setUserId("10000");
attachment.setAttachSize((int)fileItem.getSize());
//判断父目录是否存在,不存在就创建
mkdir(tempFile.getParentFile());
fileItem.write(tempFile);
int resultCount = this.attachmentService.save(attachment);
if(resultCount > 0 ){
resultJson.put("errno", "0");
String portraitUrl = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+attachment.getId();
try{
portraitUrl = URLEncoder.encode(portraitUrl,"UTF-8");
}catch(Exception e2){}
resultJson.put("picId", attachment.getId());
resultJson.put("portraitUrl", portraitUrl);
}else{
resultJson.put("errno", "5");
}
}
}
}
}catch(Exception e){
e.printStackTrace();
resultJson.put("errno", "4");
}
System.out.println(resultJson.toString());
renderHtml(response, resultJson.toString());
}
private void uploadAttachToJpg(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
JSONObject resultJson = new JSONObject();
try{
List<FileItem> fileItemList = upload.parseRequest(request);
Iterator<FileItem> fileItemIter = fileItemList.iterator();
while(fileItemIter.hasNext()){
FileItem fileItem = fileItemIter.next();
//判断是否表单提交的参数
if(fileItem.isFormField()){
System.out.println("表单参数名:"+fileItem.getFieldName()+"属性值:"+fileItem.getString("utf-8"));
}else{
if(!"".equals(fileItem.getName())){
System.out.println("文件大小:"+fileItem.getSize());
System.out.println("文件类型:"+fileItem.getContentType());
System.out.println("文件名称:"+fileItem.getName());
//表单上传的文档名称
String pathName = fileItem.getName();
String fileFullName = FileUtil.getFileFullName(pathName);
String fileSimpleName = fileFullName;
if(!"".equals(FileUtil.getFileSimpleName(fileFullName))){
fileSimpleName = FileUtil.getFileSimpleName(fileFullName);
}
String rootPath = ctx.getRealPath("/");
String filePath = rootPath+savePath + File.separator + fileFullName;
System.out.println("文件路径:"+filePath);
File tempFile = new File(filePath);
Attachment attachment = new Attachment();
attachment.setId(IDGenerator.getUniqueID());
attachment.setAttachName(fileSimpleName);
attachment.setAttachSuffix(FileUtil.getFileSuffix(fileFullName));
attachment.setAttachPath(filePath);
attachment.setCreateDate(DateUtil.getCurrDateStr());
attachment.setUserId("10000");
attachment.setAttachSize((int)fileItem.getSize());
//判断父目录是否存在,不存在就创建
mkdir(tempFile.getParentFile());
fileItem.write(tempFile);
int resultCount = this.attachmentService.save(attachment);
if(resultCount > 0 ){
resultJson.put("errno", "0");
String portraitUrl = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+attachment.getId();
try{
portraitUrl = URLEncoder.encode(portraitUrl,"UTF-8");
}catch(Exception e2){}
resultJson.put("picId", attachment.getId());
resultJson.put("portraitUrl", portraitUrl);
}else{
resultJson.put("errno", "5");
}
}
}
}
}catch(Exception e){
e.printStackTrace();
resultJson.put("errno", "4");
}
System.out.println(resultJson.toString());
renderHtml(response, resultJson.toString());
}
private void clipImg(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String attachId = StringUtil.trimStr(request.getParameter("attachId"));
int x = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("x")), 0);
int y = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("y")), 0);
int width = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("width")), 0);
int height = StringUtil.obj2Int(StringUtil.trimStr(request.getParameter("height")), 0);
JSONObject resultJson = new JSONObject();
Attachment attachment = this.attachmentService.findByAttachId(attachId);
if(null != attachment){
String id = attachment.getId();
String outFilePath = attachment.getAttachPath();
String suffix = attachment.getAttachSuffix();
String attachmentParentPath = FileUtil.getParentPath(outFilePath);
String clipSimpleName = id + "_clip";
String clipFilePath = attachmentParentPath + File.separator + clipSimpleName + "."+ suffix;
Attachment clipAttach = new Attachment();
clipAttach.setId(IDGenerator.getUniqueID());
clipAttach.setAttachName(clipSimpleName);
clipAttach.setAttachSuffix(suffix);
clipAttach.setAttachPath(clipFilePath);
clipAttach.setCreateDate(DateUtil.getCurrDateStr());
clipAttach.setUserId("10000");
ImgCutUtil.cut(outFilePath, clipFilePath, x, y, width, height);
int clipFileSize = (int) FileUtil.getFileSize(clipFilePath);
clipAttach.setAttachSize(clipFileSize);
int resultCount = this.attachmentService.save(clipAttach);
if(resultCount > 0){
resultJson = this.getMsgJson(0, "success", null, null);
String url = request.getContextPath()+"/uploadController?action=getImageFile&attachId="+clipAttach.getId();
try{
url = URLEncoder.encode(url,"UTF-8");
}catch(Exception e2){}
resultJson.put("errno", 1);
resultJson.put("url", url);
resultJson.put("clipId", clipAttach.getId());
}else{
resultJson.put("errno", 5);
}
renderJson(response, resultJson.toString());
}
}
private void getAttachFile(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String attachId = StringUtil.trimStr(request.getParameter("attachId"));
Attachment attachment = this.attachmentService.findByAttachId(attachId);
if(null != attachment){
String outFilePath = attachment.getAttachPath();
String outFileName = attachment.getAttachName();
outFileName += "." + attachment.getAttachSuffix();
File outFile = new File(outFilePath);
if(outFile.exists()){
response.reset();
//清除缓冲数据
response.reset();
//设置编码形式
response.setCharacterEncoding("UTF-8");
//输出类型字节流
response.setContentType("application/x-msdownload");
//设置内容描述,设置为附件,设置文件名URLEncoder.encode(filename.substring(filename.lastIndexOf("/")+1),"UTF-8")
response.setHeader("Content-Disposition", "attachment;filename=" +new String(outFileName.replaceAll("[/\\\\|:*?<>]", "").getBytes("GBK"), "ISO8859_1"));
BufferedInputStream bis = new BufferedInputStream(new FileInputStream(outFile));
OutputStream toClient = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(toClient);
byte[] buffer = new byte[1024];
int read = 0;
//循环写数据到客户端
while((read = bis.read(buffer)) != -1){
bos.write(buffer, 0, read);
}
bos.flush();
//关闭输入输出流
bos.close();
bis.close();
}
}
}
private void getImageFile(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String attachId = StringUtil.trimStr(request.getParameter("attachId"));
Attachment attachment = this.attachmentService.findByAttachId(attachId);
if(null != attachment){
String outFilePath = attachment.getAttachPath();
String outFileName = attachment.getAttachName();
outFileName += "." + attachment.getAttachSuffix();
File outFile = new File(outFilePath);
if(outFile.exists()){
response.reset();
//清除缓冲数据
response.reset();
//设置编码形式
response.setCharacterEncoding("UTF-8");
// 设置响应的类型格式为图片格式
response.setContentType("image/jpeg");
//禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
/*//设置内容描述,设置为附件,设置文件名URLEncoder.encode(filename.substring(filename.lastIndexOf("/")+1),"UTF-8")
response.setHeader("Content-Disposition", "attachment;filename=" +new String(outFileName.replaceAll("[/\\\\|:*?<>]", "").getBytes("GBK"), "ISO8859_1"));*/
BufferedInputStream bis = new BufferedInputStream(new FileInputStream(outFile));
OutputStream toClient = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(toClient);
byte[] buffer = new byte[1024];
int read = 0;
//循环写数据到客户端
while((read = bis.read(buffer)) != -1){
bos.write(buffer, 0, read);
}
bos.flush();
//关闭输入输出流
bos.close();
bis.close();
}
}
}
private void testResponse(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
JSONObject testJson = new JSONObject();
testJson.put("code", "12345");
testJson.put("error", "错误提示信息");
/* renderHtml(response,"<br/><h2>我是打印的html</h2>");
renderText(response, "<br/>我<b>是</b>打印的纯文本<br/>");*/
renderJson(response, testJson.toJSONString());
}
/**
* 创建目录
* @param dir 需要创建的目录
*/
public static void mkdir(File dir){
if(null == dir) return;
if(!dir.exists()){
mkdir(dir.getParentFile());
dir.mkdir();
}
}
}
serlvet的父类:
package com.wqjweb.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.config.AutowireCapableBeanFactory;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
public abstract class AutowiredHttpServlet extends HttpServlet {
private static final long serialVersionUID = -2000909174467653847L;
public void init() throws ServletException {
super.init();
WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(getServletContext());
AutowireCapableBeanFactory factory = ctx.getAutowireCapableBeanFactory();
//使其子类支持自动注入bean
factory.autowireBean(this);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
servlet(request, response);
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
servlet(request, response);
}
/**
* 子类实现该方法,进行Servlet Post和Get请求服务。
* @param request HttpServletRequest实例
* @param response HttpServletResponse实例
* @throws IOException
* @throws ServletException
* @author yinlei
* date 2011-8-9 下午7:15:41
*/
public abstract void servlet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException;
/**
* 直接输出json。
*/
public void renderJson(HttpServletResponse response, String json) {
response(response, json, "application/json;charset=UTF-8");
}
/**
* 直接输出纯HTML。
*/
public void renderHtml(HttpServletResponse response, String text) {
response(response, text, "text/html;charset=UTF-8");
}
/**
* 直接输出纯字符串。
*/
public void renderText(HttpServletResponse response, String text) {
response(response, text, "text/plain;charset=UTF-8");
}
public void response(HttpServletResponse response, String text, String contentType) {
try {
response.setContentType(contentType);
response.getWriter().write(text);
} catch (IOException e) {
}
}
public JSONObject getMsgJson(int code ,String msg,String script,String id){
JSONObject jsonObj = new JSONObject();
jsonObj.put("code", code);
jsonObj.put("msg", msg);
jsonObj.put("script", script);
jsonObj.put("id", id);
return jsonObj;
}
}
ImgCutUtil代码:
package com.wqjweb.util.image;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
public class ImgCutUtil{
// JGP格式
public static final String JPG = "jpeg";
// GIF格式
public static final String GIF = "gif";
// PNG格式
public static final String PNG = "png";
// BMP格式
public static final String BMP = "bmp";
/**
* 对图片裁剪,并把裁剪完蛋新图片保存 。
* @param srcpath 源图片路径
* @param subpath 剪切图片存放路径
* @param x 剪切点x坐标
* @param y 剪切点y坐标
* @param width 剪切宽度
* @param height 剪切高度
* @throws IOException
*/
public static void cut(String srcpath,String subpath,int x,int y,int width,int height) throws IOException{
FileInputStream is = null ;
ImageInputStream iis =null ;
try{
//读取图片文件
is = new FileInputStream(srcpath);
/**//*
* 返回包含所有当前已注册 ImageReader 的 Iterator,这些 ImageReader
* 声称能够解码指定格式。 参数:formatName - 包含非正式格式名称 .
*(例如 "jpeg" 或 "tiff")等 。
*/
String suffix = srcpath.substring(srcpath.lastIndexOf(".")+1);
String fromatName1 = JPG;
if("gif".equals(suffix)){
fromatName1 = GIF;
}else if("jpg".equals(suffix)){
fromatName1 = JPG;
}else if("png".equals(suffix)){
fromatName1 = PNG;
}else if ("bmp".equals(suffix)){
fromatName1 = BMP;
}
String suffix2 = subpath.substring(subpath.lastIndexOf(".")+1);
String formatName = JPG;
if("gif".equals(suffix2)){
formatName = GIF;
}else if("jpg".equals(suffix2)){
formatName = JPG;
}else if("png".equals(suffix2)){
formatName = PNG;
}else if ("bmp".equals(suffix2)){
formatName = BMP;
}
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(fromatName1);
ImageReader reader = it.next();
//获取图片流
iis = ImageIO.createImageInputStream(is);
/**//*
* <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。
* 此设置意味着包含在输入源中的图像将只按顺序读取,可能允许 reader
* 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
*/
reader.setInput(iis,true) ;
/**//*
* <p>描述如何对流进行解码的类<p>.用于指定如何在输入时从 Java Image I/O
* 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件
* 将从其 ImageReader 实现的 getDefaultReadParam 方法中返回
* ImageReadParam 的实例。
*/
ImageReadParam param = reader.getDefaultReadParam();
/**//*
* 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域,通过 Rectangle 对象
* 的左上顶点的坐标(x,y)、宽度和高度可以定义这个区域。
*/
Rectangle rect = new Rectangle(x, y, width, height);
//提供一个 BufferedImage,将其用作解码像素数据的目标。
param.setSourceRegion(rect);
/**//*
* 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象,并将
* 它作为一个完整的 BufferedImage 返回。
*/
BufferedImage bi = reader.read(0,param);
//保存新图片
ImageIO.write(bi, formatName, new File(subpath));
}
finally{
if(is!=null)
is.close() ;
if(iis!=null)
iis.close();
}
}
public static void main(String[] args) {
try {
ImgCutUtil.cut("F:\\Workspaces\\elcipse_vdp_back\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\UploadPicDemo\\file\\"+"battery.png", "F:\\aa.png", 10, 0, 20, 20);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
完整java项目demo下载点击打开链接