- 浏览: 300497 次
- 性别:
- 来自: 南京
最新评论
-
memorymyann:
不好意思我看错了
Java计算时间差 -
memorymyann:
好吧,网上很多方法一的,我不知道大家有验证过没有。我测试了下。 ...
Java计算时间差 -
ndzj981479673:
TonyLian 写道下这个包到WEB-INF/libs sp ...
org.springframework.web.servlet.DispatcherServlet -
Heart-wu:
com.jacob.com.ComFailException: ...
Jacob使用小结 -
wo4562658:
没有附件?getAnyCellStyle 这个方法,getHd ...
POI使用小结
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String Pic = (String) request.getParameter("p");
int PointX = Integer.parseInt(request.getParameter("x"));
int PointY = Integer.parseInt(request.getParameter("y"));
int CutWidth = Integer.parseInt(request.getParameter("w"));
int CutHeight = Integer.parseInt(request.getParameter("h"));
// 图片宽度
int PicWidth = Integer.parseInt(request.getParameter("pw"));
// 图片高度
int PicHeight = Integer.parseInt(request.getParameter("ph"));
response.setContentType("image/jpeg");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
HttpSession session = request.getSession();
String picPath = Pic;
String path = request.getRealPath(picPath);
ServletOutputStream responseOutputStream = response.getOutputStream();
cut(path, responseOutputStream, CutWidth, CutHeight, PointX, PointY,
PicWidth, PicHeight);
// 以下关闭输入流!
responseOutputStream.flush();
responseOutputStream.close();
}
/**
* 图片切割
* @param srcImageFile 图片地址
* @param responseOutputStream servlet输出流
* @param w 切割宽度
* @param h 切割高度
* @param x1 开始x结点(left)
* @param y1 开始y结点(top)
* @param sw 图片宽度
* @param sh 图片高度
*/
public void cut(String srcImageFile,ServletOutputStream responseOutputStream, int w, int h, int x1,
int y1, int sw, int sh) {
try {
// http://localhost:8080/ImpCra/createServlet?p=Sunset.jpg&x=117&y=201&w=61&h=50&pw=300&ph=400
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
if (sw >= w && sh >= h) {
Image image = bi.getScaledInstance(sw, sh, Image.SCALE_DEFAULT);
// 剪切起始坐标点
int x = x1;
int y = y1;
int destWidth = w; // 切片宽度
int destHeight = h; // 切片高度
// 图片比例
double pw = sw;
double ph = sh;
double m = (double) sw / pw;
double n = (double) sh / ph;
int wth = (int) (destWidth * m);
int hth = (int) (destHeight * n);
int xx = (int) (x * m);
int yy = (int) (y * n);
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(xx, yy, wth, hth);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w, h,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", responseOutputStream);
}
} catch (Exception e) {
e.printStackTrace();
}
}
<!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=UTF-8" />
<title>JavaScript 图片切割效果(带拖放、缩放效果) </title>
</head>
<body>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;}
#dragDiv{border:1px solid #000000;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<div id="bgDiv" style="width:400px; height:500px;">
<div id="dragDiv">
<div id="rRightDown" style="right:0; bottom:0;"> </div>
<div id="rLeftDown" style="left:0; bottom:0;"> </div>
<div id="rRightUp" style="right:0; top:0;"> </div>
<div id="rLeftUp" style="left:0; top:0;"> </div>
<div id="rRight" style="right:0; top:50%;"> </div>
<div id="rLeft" style="left:0; top:50%;"> </div>
<div id="rUp" style="top:0; left:50%;"> </div>
<div id="rDown" style="bottom:0;left:50%;"></div>
</div>
</div>
</td>
<td><div id="viewDiv" style="width:200px; height:200px;"> </div></td>
</tr>
</table>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var isIE = (document.all) ? true : false;
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 Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象,触发对象
initialize: function(obj, drag, options) {
var oThis = this;
this._obj = $(obj);//拖放对象
this.Drag = $(drag);//触发对象
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
//事件对象(用于移除事件)
this._fM = function(e){ oThis.Move(window.event || e); }
this._fS = function(){ oThis.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.onMove = this.options.onMove;
this._obj.style.position = "absolute";
addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Limit: false,//是否设置限制(为true时下面参数有用,可以是负数)
mxLeft: 0,//左边限制
mxRight: 0,//右边限制
mxTop: 0,//上边限制
mxBottom: 0,//下边限制
onMove: function(){}//移动时执行
};
Object.extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX - this._obj.offsetLeft;
this._y = oEvent.clientY - this._obj.offsetTop;
//mousemove时移动 mouseup时停止
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
//使鼠标移到窗口外也能释放
if(isIE){
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//拖动
Move: function(oEvent) {
//清除选择(ie设置捕获后默认带这个)
window.getSelection && window.getSelection().removeAllRanges();
//当前鼠标位置减去相对拖放对象的位置得到offset位置
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
//设置范围限制
if(this.Limit){
//获取超出长度
var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
//这里是先设置右边下边再设置左边上边,可能会不准确
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
}
//设置位置
this._obj.style.left = iLeft + "px";
this._obj.style.top = iTop + "px";
//附加程序
this.onMove();
},
//停止拖动
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
}
};
//缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj, options) {
var oThis = this;
this._obj = $(obj);//缩放对象
this._right = this._down = this._left = this._up = 0;//坐标参数
this._scale = 1;//比例参数
this._touch = null;//当前触发对象
//用currentStyle(ff用getComputedStyle)取得最终样式
var _style = this._obj.currentStyle || document.defaultView.getComputedStyle(this._obj, null);
this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
//事件对象(用于移除事件)
this._fR = function(e){ oThis.Resize(e); }
this._fS = function(){ oThis.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.MinWidth = parseInt(this.options.MinWidth);
this.MinHeight = parseInt(this.options.MinHeight);
this.Scale = !!this.options.Scale;
this.onResize = this.options.onResize;
this._obj.style.position = "absolute";
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Limit: false,//是否设置限制(为true时下面mx参数有用)
mxLeft: 0,//左边限制
mxRight: 0,//右边限制
mxTop: 0,//上边限制
mxBottom: 0,//下边限制
MinWidth: 50,//最小宽度
MinHeight: 50,//最小高度
Scale: false,//是否按比例缩放
onResize: function(){}//缩放时执行
};
Object.extend(this.options, options || {});
},
//设置触发对象
Set: function(resize, side) {
var oThis = this, resize = $(resize), _fun, _cursor;
if(!resize) return;
//根据方向设置 _fun是缩放时执行的程序 _cursor是鼠标样式
switch (side.toLowerCase()) {
case "up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleUpRight(e); }else{ oThis.SetUp(e); } };
_cursor = "n-resize";
break;
case "down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleDownRight(e); }else{ oThis.SetDown(e); } };
_cursor = "n-resize";
break;
case "left" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); } };
_cursor = "e-resize";
break;
case "right" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); } };
_cursor = "e-resize";
break;
case "left-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); oThis.SetUp(e); } };
_cursor = "nw-resize";
break;
case "right-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightUp(e); }else{ oThis.SetRight(e); oThis.SetUp(e); } };
_cursor = "ne-resize";
break;
case "left-down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftDown(e); }else{ oThis.SetLeft(e); oThis.SetDown(e); } };
_cursor = "ne-resize";
break;
case "right-down" :
default :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); oThis.SetDown(e); } };
_cursor = "nw-resize";
}
//设置触发对象
resize.style.cursor = _cursor;
addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; oThis.Start(window.event || e); });
},
//准备缩放
Start: function(oEvent, o) {
//防止冒泡
if(isIE){ oEvent.cancelBubble = true; } else { oEvent.stopPropagation(); }
//计算样式初始值
this.style_width = this._obj.offsetWidth;
this.style_height = this._obj.offsetHeight;
this.style_left = this._obj.offsetLeft;
this.style_top = this._obj.offsetTop;
//设置缩放比例
if(this.Scale){ this._scale = this.style_width / this.style_height; }
//计算当前边的对应另一条边的坐标 例如右边缩放时需要左边界坐标
this._left = oEvent.clientX - this.style_width;
this._right = oEvent.clientX + this.style_width;
this._up = oEvent.clientY - this.style_height;
this._down = oEvent.clientY + this.style_height;
//如果有范围 先计算好范围内最大宽度和高度
if(this.Limit){
this._mxRight = this.mxRight - this._obj.offsetLeft;
this._mxDown = this.mxBottom - this._obj.offsetTop;
this._mxLeft = this.mxLeft + this.style_width + this._obj.offsetLeft;
this._mxUp = this.mxTop + this.style_height + this._obj.offsetTop;
}
//mousemove时缩放 mouseup时停止
addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
//使鼠标移到窗口外也能释放
if(isIE){
addEventHandler(this._touch, "losecapture", this._fS);
this._touch.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//缩放
Resize: function(e) {
//没有触发对象的话返回
if(!this._touch) return;
//清除选择(ie设置捕获后默认带这个)
window.getSelection && window.getSelection().removeAllRanges();
//执行缩放程序
this._fun(window.event || e);
//设置样式
//因为计算用的offset是把边框算进去的所以要减去
this._obj.style.width = this.style_width - this._xBorder + "px";
this._obj.style.height = this.style_height - this._yBorder + "px";
this._obj.style.top = this.style_top + "px";
this._obj.style.left = this.style_left + "px";
//附加程序
this.onResize();
},
//普通缩放
//右边
SetRight: function(oEvent) {
//当前坐标位置减去左边的坐标等于当前宽度
this.repairRight(oEvent.clientX - this._left);
},
//下边
SetDown: function(oEvent) {
this.repairDown(oEvent.clientY - this._up);
},
//左边
SetLeft: function(oEvent) {
//右边的坐标减去当前坐标位置等于当前宽度
this.repairLeft(this._right - oEvent.clientX);
},
//上边
SetUp: function(oEvent) {
this.repairUp(this._down - oEvent.clientY);
},
//比例缩放
//比例缩放右下
scaleRightDown: function(oEvent) {
//先计算宽度然后按比例计算高度最后根据确定的高度计算宽度(宽度优先)
this.SetRight(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左下
scaleLeftDown: function(oEvent) {
this.SetLeft(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//比例缩放右上
scaleRightUp: function(oEvent) {
this.SetRight(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左上
scaleLeftUp: function(oEvent) {
this.SetLeft(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//这里是高度优先用于上下两边(体验更好)
//比例缩放下右
scaleDownRight: function(oEvent) {
this.SetDown(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairDown(parseInt(this.style_width / this._scale));
},
//比例缩放上右
scaleUpRight: function(oEvent) {
this.SetUp(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairUp(parseInt(this.style_width / this._scale));
},
//修正程序
//修正右边
repairRight: function(iWidth) {
//右边和下边只要设置宽度和高度就行
//当少于最少宽度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//当超过当前设定的最大宽度
if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
//修改样式
this.style_width = iWidth;
},
//修正下边
repairDown: function(iHeight) {
if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
this.style_height = iHeight;
},
//修正左边
repairLeft: function(iWidth) {
//左边和上边比较麻烦 因为还要计算left和top
//当少于最少宽度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//当超过当前设定的最大宽度
else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
//修改样式
this.style_width = iWidth;
this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
},
//修正上边
repairUp: function(iHeight) {
if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
this.style_height = iHeight;
this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
},
//停止缩放
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._touch, "losecapture", this._fS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
this._touch = null;
}
};
//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
//容器对象,拖放缩放对象,图片地址,宽度,高度
initialize: function(container, drag, url, width, height, options) {
var oThis = this;
//容器对象
this.Container = $(container);
this.Container.style.position = "relative";
this.Container.style.overflow = "hidden";
//拖放对象
this.Drag = $(drag);
this.Drag.style.cursor = "move";
this.Drag.style.zIndex = 200;
if(isIE){
//设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
this.Drag.style.overflow = "hidden";
//ie下用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
(function(style){
style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
})(this.Drag.appendChild(document.createElement("div")).style)
}
this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
this._cropper = this.Container.appendChild(document.createElement("img"));//切割对象
this._pic.style.position = this._cropper.style.position = "absolute";
this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";//对齐
this._cropper.style.zIndex = 100;
this._cropper.onload = function(){ oThis.SetPos(); }
this.Url = url;//图片地址
this.Width = parseInt(width);//宽度
this.Height = parseInt(height);//高度
this.SetOptions(options);
this.Opacity = parseInt(this.options.Opacity);
this.dragTop = parseInt(this.options.dragTop);
this.dragLeft = parseInt(this.options.dragLeft);
this.dragWidth = parseInt(this.options.dragWidth);
this.dragHeight = parseInt(this.options.dragHeight);
//设置预览对象
this.View = $(this.options.View) || null;//预览对象
this.viewWidth = parseInt(this.options.viewWidth);
this.viewHeight = parseInt(this.options.viewHeight);
this._view = null;//预览图片对象
if(this.View){
this.View.style.position = "relative";
this.View.style.overflow = "hidden";
this._view = this.View.appendChild(document.createElement("img"));
this._view.style.position = "absolute";
}
this.Scale = parseInt(this.options.Scale);
//设置拖放
this._drag = new Drag(this.Drag, this.Drag, { Limit: true, onMove: function(){ oThis.SetPos(); } });
//设置缩放
this._resize = this.GetResize();
this.Init();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Opacity: 50,//透明度(0到100)
//拖放位置和宽高
dragTop: 0,
dragLeft: 0,
dragWidth: 100,
dragHeight: 100,
//缩放触发对象
Right: "",
Left: "",
Up: "",
Down: "",
RightDown: "",
LeftDown: "",
RightUp: "",
LeftUp: "",
Scale: false,//是否按比例缩放
//预览对象设置
View: "",//预览对象
viewWidth: 100,//预览宽度
viewHeight: 100//预览高度
};
Object.extend(this.options, options || {});
},
//初始化对象
Init: function() {
var oThis = this;
//设置容器
this.Container.style.width = this.Width + "px";
this.Container.style.height = this.Height + "px";
//设置拖放对象
this.Drag.style.top = this.dragTop + "px";
this.Drag.style.left = this.dragLeft + "px";
this.Drag.style.width = this.dragWidth + "px";
this.Drag.style.height = this.dragHeight + "px";
//设置切割对象
this._pic.src = this._cropper.src = this.Url;
this._pic.style.width = this._cropper.style.width = this.Width + "px";
this._pic.style.height = this._cropper.style.height = this.Height + "px";
if(isIE){
this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
} else {
this._pic.style.opacity = this.Opacity / 100;
}
//设置预览对象
if(this.View){ this._view.src = this.Url; }
//设置拖放
this._drag.mxRight = this.Width; this._drag.mxBottom = this.Height;
//设置缩放
if(this._resize){ this._resize.mxRight = this.Width; this._resize.mxBottom = this.Height; this._resize.Scale = this.Scale; }
},
//设置获取缩放对象
GetResize: function() {
var op = this.options;
//有触发对象时才设置
if(op.RightDown || op.LeftDown || op.RightUp || op.LeftUp || op.Right || op.Left || op.Up || op.Down ){
var oThis = this, _resize = new Resize(this.Drag, { Limit: true, onResize: function(){ oThis.SetPos(); } });
//设置缩放触发对象
if(op.RightDown){ _resize.Set(op.RightDown, "right-down"); }
if(op.LeftDown){ _resize.Set(op.LeftDown, "left-down"); }
if(op.RightUp){ _resize.Set(op.RightUp, "right-up"); }
if(op.LeftUp){ _resize.Set(op.LeftUp, "left-up"); }
if(op.Right){ _resize.Set(op.Right, "right"); }
if(op.Left){ _resize.Set(op.Left, "left"); }
if(op.Up){ _resize.Set(op.Up, "up"); }
if(op.Down){ _resize.Set(op.Down, "down"); }
return _resize;
} else { return null; }
},
//设置切割
SetPos: function() {
var o = this.Drag;
//按拖放对象的参数进行切割
this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
//切割预览
if(this.View) this.PreView();
},
//切割预览
PreView: function() {
//按比例设置宽度和高度
var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
//获取对应比例尺寸
var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
//设置样式
styleView.width = pw + "px"; styleView.height = ph + "px";
styleView.top = - pt + "px "; styleView.left = - pl + "px";
//切割预览图
styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
}
}
var ic = new ImgCropper("bgDiv", "dragDiv", "../image/Sunset.jpg", 300, 400, {
dragTop: 50, dragLeft: 50,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
View: "viewDiv", viewWidth: 200, viewHeight: 200
})
</script>
<script>
//设置图片大小
function Size(w, h){
ic.Width = w;
ic.Height = h;
ic.Init();
}
//换图片
function Pic(url){
ic.Url = url;
ic.Init();
}
//设置透明度
function Opacity(i){
ic.Opacity = i;
ic.Init();
}
//是否使用比例
function Scale(b){
ic.Scale = b;
ic.Init();
}
</script>
<br />
<br />
<div>
<input name="" type="button" value=" 增肥 " onclick="Size(500,400)" />
<input name="" type="button" value=" 还原 " onclick="Size(300,400)" />
</div>
<br />
<div>
<input name="" type="button" value=" 换图 " onclick="Pic('2.jpg')" />
<input name="" type="button" value=" 还原 " onclick="Pic('1.jpg')" />
</div>
<br />
<div>
<input name="" type="button" value=" 透明 " onclick="Opacity(0)" />
<input name="" type="button" value=" 还原 " onclick="Opacity(50)" />
</div>
<br />
<div>
<input name="" type="button" value="使用比例" onclick="Scale(true)" />
<input name="" type="button" value="取消比例" onclick="Scale(false)" />
</div>
<br />
<div>
<input name="" type="button" value="生成图片" onclick="Create()" />
<br />
<img id="imgCreat" />
</div>
<script>
function Create(){
var p = ic.Url,
x = ic.Drag.offsetLeft,
y = ic.Drag.offsetTop,
w = ic.Drag.offsetWidth,
h = ic.Drag.offsetHeight,
pw = ic.Width,
ph = ic.Height;
$("imgCreat").src = "/createServlet?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph;
}
</script>
</body>
</html>
HttpServletResponse response) throws ServletException, IOException {
String Pic = (String) request.getParameter("p");
int PointX = Integer.parseInt(request.getParameter("x"));
int PointY = Integer.parseInt(request.getParameter("y"));
int CutWidth = Integer.parseInt(request.getParameter("w"));
int CutHeight = Integer.parseInt(request.getParameter("h"));
// 图片宽度
int PicWidth = Integer.parseInt(request.getParameter("pw"));
// 图片高度
int PicHeight = Integer.parseInt(request.getParameter("ph"));
response.setContentType("image/jpeg");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
HttpSession session = request.getSession();
String picPath = Pic;
String path = request.getRealPath(picPath);
ServletOutputStream responseOutputStream = response.getOutputStream();
cut(path, responseOutputStream, CutWidth, CutHeight, PointX, PointY,
PicWidth, PicHeight);
// 以下关闭输入流!
responseOutputStream.flush();
responseOutputStream.close();
}
/**
* 图片切割
* @param srcImageFile 图片地址
* @param responseOutputStream servlet输出流
* @param w 切割宽度
* @param h 切割高度
* @param x1 开始x结点(left)
* @param y1 开始y结点(top)
* @param sw 图片宽度
* @param sh 图片高度
*/
public void cut(String srcImageFile,ServletOutputStream responseOutputStream, int w, int h, int x1,
int y1, int sw, int sh) {
try {
// http://localhost:8080/ImpCra/createServlet?p=Sunset.jpg&x=117&y=201&w=61&h=50&pw=300&ph=400
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
if (sw >= w && sh >= h) {
Image image = bi.getScaledInstance(sw, sh, Image.SCALE_DEFAULT);
// 剪切起始坐标点
int x = x1;
int y = y1;
int destWidth = w; // 切片宽度
int destHeight = h; // 切片高度
// 图片比例
double pw = sw;
double ph = sh;
double m = (double) sw / pw;
double n = (double) sh / ph;
int wth = (int) (destWidth * m);
int hth = (int) (destHeight * n);
int xx = (int) (x * m);
int yy = (int) (y * n);
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(xx, yy, wth, hth);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w, h,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", responseOutputStream);
}
} catch (Exception e) {
e.printStackTrace();
}
}
<!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=UTF-8" />
<title>JavaScript 图片切割效果(带拖放、缩放效果) </title>
</head>
<body>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;}
#dragDiv{border:1px solid #000000;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
<div id="bgDiv" style="width:400px; height:500px;">
<div id="dragDiv">
<div id="rRightDown" style="right:0; bottom:0;"> </div>
<div id="rLeftDown" style="left:0; bottom:0;"> </div>
<div id="rRightUp" style="right:0; top:0;"> </div>
<div id="rLeftUp" style="left:0; top:0;"> </div>
<div id="rRight" style="right:0; top:50%;"> </div>
<div id="rLeft" style="left:0; top:50%;"> </div>
<div id="rUp" style="top:0; left:50%;"> </div>
<div id="rDown" style="bottom:0;left:50%;"></div>
</div>
</div>
</td>
<td><div id="viewDiv" style="width:200px; height:200px;"> </div></td>
</tr>
</table>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var isIE = (document.all) ? true : false;
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 Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象,触发对象
initialize: function(obj, drag, options) {
var oThis = this;
this._obj = $(obj);//拖放对象
this.Drag = $(drag);//触发对象
this._x = this._y = 0;//记录鼠标相对拖放对象的位置
//事件对象(用于移除事件)
this._fM = function(e){ oThis.Move(window.event || e); }
this._fS = function(){ oThis.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.onMove = this.options.onMove;
this._obj.style.position = "absolute";
addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Limit: false,//是否设置限制(为true时下面参数有用,可以是负数)
mxLeft: 0,//左边限制
mxRight: 0,//右边限制
mxTop: 0,//上边限制
mxBottom: 0,//下边限制
onMove: function(){}//移动时执行
};
Object.extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
//记录鼠标相对拖放对象的位置
this._x = oEvent.clientX - this._obj.offsetLeft;
this._y = oEvent.clientY - this._obj.offsetTop;
//mousemove时移动 mouseup时停止
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
//使鼠标移到窗口外也能释放
if(isIE){
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//拖动
Move: function(oEvent) {
//清除选择(ie设置捕获后默认带这个)
window.getSelection && window.getSelection().removeAllRanges();
//当前鼠标位置减去相对拖放对象的位置得到offset位置
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
//设置范围限制
if(this.Limit){
//获取超出长度
var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
//这里是先设置右边下边再设置左边上边,可能会不准确
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
}
//设置位置
this._obj.style.left = iLeft + "px";
this._obj.style.top = iTop + "px";
//附加程序
this.onMove();
},
//停止拖动
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
}
};
//缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj, options) {
var oThis = this;
this._obj = $(obj);//缩放对象
this._right = this._down = this._left = this._up = 0;//坐标参数
this._scale = 1;//比例参数
this._touch = null;//当前触发对象
//用currentStyle(ff用getComputedStyle)取得最终样式
var _style = this._obj.currentStyle || document.defaultView.getComputedStyle(this._obj, null);
this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
//事件对象(用于移除事件)
this._fR = function(e){ oThis.Resize(e); }
this._fS = function(){ oThis.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.MinWidth = parseInt(this.options.MinWidth);
this.MinHeight = parseInt(this.options.MinHeight);
this.Scale = !!this.options.Scale;
this.onResize = this.options.onResize;
this._obj.style.position = "absolute";
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Limit: false,//是否设置限制(为true时下面mx参数有用)
mxLeft: 0,//左边限制
mxRight: 0,//右边限制
mxTop: 0,//上边限制
mxBottom: 0,//下边限制
MinWidth: 50,//最小宽度
MinHeight: 50,//最小高度
Scale: false,//是否按比例缩放
onResize: function(){}//缩放时执行
};
Object.extend(this.options, options || {});
},
//设置触发对象
Set: function(resize, side) {
var oThis = this, resize = $(resize), _fun, _cursor;
if(!resize) return;
//根据方向设置 _fun是缩放时执行的程序 _cursor是鼠标样式
switch (side.toLowerCase()) {
case "up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleUpRight(e); }else{ oThis.SetUp(e); } };
_cursor = "n-resize";
break;
case "down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleDownRight(e); }else{ oThis.SetDown(e); } };
_cursor = "n-resize";
break;
case "left" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); } };
_cursor = "e-resize";
break;
case "right" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); } };
_cursor = "e-resize";
break;
case "left-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); oThis.SetUp(e); } };
_cursor = "nw-resize";
break;
case "right-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightUp(e); }else{ oThis.SetRight(e); oThis.SetUp(e); } };
_cursor = "ne-resize";
break;
case "left-down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftDown(e); }else{ oThis.SetLeft(e); oThis.SetDown(e); } };
_cursor = "ne-resize";
break;
case "right-down" :
default :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); oThis.SetDown(e); } };
_cursor = "nw-resize";
}
//设置触发对象
resize.style.cursor = _cursor;
addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; oThis.Start(window.event || e); });
},
//准备缩放
Start: function(oEvent, o) {
//防止冒泡
if(isIE){ oEvent.cancelBubble = true; } else { oEvent.stopPropagation(); }
//计算样式初始值
this.style_width = this._obj.offsetWidth;
this.style_height = this._obj.offsetHeight;
this.style_left = this._obj.offsetLeft;
this.style_top = this._obj.offsetTop;
//设置缩放比例
if(this.Scale){ this._scale = this.style_width / this.style_height; }
//计算当前边的对应另一条边的坐标 例如右边缩放时需要左边界坐标
this._left = oEvent.clientX - this.style_width;
this._right = oEvent.clientX + this.style_width;
this._up = oEvent.clientY - this.style_height;
this._down = oEvent.clientY + this.style_height;
//如果有范围 先计算好范围内最大宽度和高度
if(this.Limit){
this._mxRight = this.mxRight - this._obj.offsetLeft;
this._mxDown = this.mxBottom - this._obj.offsetTop;
this._mxLeft = this.mxLeft + this.style_width + this._obj.offsetLeft;
this._mxUp = this.mxTop + this.style_height + this._obj.offsetTop;
}
//mousemove时缩放 mouseup时停止
addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
//使鼠标移到窗口外也能释放
if(isIE){
addEventHandler(this._touch, "losecapture", this._fS);
this._touch.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//缩放
Resize: function(e) {
//没有触发对象的话返回
if(!this._touch) return;
//清除选择(ie设置捕获后默认带这个)
window.getSelection && window.getSelection().removeAllRanges();
//执行缩放程序
this._fun(window.event || e);
//设置样式
//因为计算用的offset是把边框算进去的所以要减去
this._obj.style.width = this.style_width - this._xBorder + "px";
this._obj.style.height = this.style_height - this._yBorder + "px";
this._obj.style.top = this.style_top + "px";
this._obj.style.left = this.style_left + "px";
//附加程序
this.onResize();
},
//普通缩放
//右边
SetRight: function(oEvent) {
//当前坐标位置减去左边的坐标等于当前宽度
this.repairRight(oEvent.clientX - this._left);
},
//下边
SetDown: function(oEvent) {
this.repairDown(oEvent.clientY - this._up);
},
//左边
SetLeft: function(oEvent) {
//右边的坐标减去当前坐标位置等于当前宽度
this.repairLeft(this._right - oEvent.clientX);
},
//上边
SetUp: function(oEvent) {
this.repairUp(this._down - oEvent.clientY);
},
//比例缩放
//比例缩放右下
scaleRightDown: function(oEvent) {
//先计算宽度然后按比例计算高度最后根据确定的高度计算宽度(宽度优先)
this.SetRight(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左下
scaleLeftDown: function(oEvent) {
this.SetLeft(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//比例缩放右上
scaleRightUp: function(oEvent) {
this.SetRight(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左上
scaleLeftUp: function(oEvent) {
this.SetLeft(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//这里是高度优先用于上下两边(体验更好)
//比例缩放下右
scaleDownRight: function(oEvent) {
this.SetDown(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairDown(parseInt(this.style_width / this._scale));
},
//比例缩放上右
scaleUpRight: function(oEvent) {
this.SetUp(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairUp(parseInt(this.style_width / this._scale));
},
//修正程序
//修正右边
repairRight: function(iWidth) {
//右边和下边只要设置宽度和高度就行
//当少于最少宽度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//当超过当前设定的最大宽度
if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
//修改样式
this.style_width = iWidth;
},
//修正下边
repairDown: function(iHeight) {
if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
this.style_height = iHeight;
},
//修正左边
repairLeft: function(iWidth) {
//左边和上边比较麻烦 因为还要计算left和top
//当少于最少宽度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//当超过当前设定的最大宽度
else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
//修改样式
this.style_width = iWidth;
this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
},
//修正上边
repairUp: function(iHeight) {
if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
this.style_height = iHeight;
this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
},
//停止缩放
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._touch, "losecapture", this._fS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
this._touch = null;
}
};
//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
//容器对象,拖放缩放对象,图片地址,宽度,高度
initialize: function(container, drag, url, width, height, options) {
var oThis = this;
//容器对象
this.Container = $(container);
this.Container.style.position = "relative";
this.Container.style.overflow = "hidden";
//拖放对象
this.Drag = $(drag);
this.Drag.style.cursor = "move";
this.Drag.style.zIndex = 200;
if(isIE){
//设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
this.Drag.style.overflow = "hidden";
//ie下用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
(function(style){
style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
})(this.Drag.appendChild(document.createElement("div")).style)
}
this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
this._cropper = this.Container.appendChild(document.createElement("img"));//切割对象
this._pic.style.position = this._cropper.style.position = "absolute";
this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";//对齐
this._cropper.style.zIndex = 100;
this._cropper.onload = function(){ oThis.SetPos(); }
this.Url = url;//图片地址
this.Width = parseInt(width);//宽度
this.Height = parseInt(height);//高度
this.SetOptions(options);
this.Opacity = parseInt(this.options.Opacity);
this.dragTop = parseInt(this.options.dragTop);
this.dragLeft = parseInt(this.options.dragLeft);
this.dragWidth = parseInt(this.options.dragWidth);
this.dragHeight = parseInt(this.options.dragHeight);
//设置预览对象
this.View = $(this.options.View) || null;//预览对象
this.viewWidth = parseInt(this.options.viewWidth);
this.viewHeight = parseInt(this.options.viewHeight);
this._view = null;//预览图片对象
if(this.View){
this.View.style.position = "relative";
this.View.style.overflow = "hidden";
this._view = this.View.appendChild(document.createElement("img"));
this._view.style.position = "absolute";
}
this.Scale = parseInt(this.options.Scale);
//设置拖放
this._drag = new Drag(this.Drag, this.Drag, { Limit: true, onMove: function(){ oThis.SetPos(); } });
//设置缩放
this._resize = this.GetResize();
this.Init();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Opacity: 50,//透明度(0到100)
//拖放位置和宽高
dragTop: 0,
dragLeft: 0,
dragWidth: 100,
dragHeight: 100,
//缩放触发对象
Right: "",
Left: "",
Up: "",
Down: "",
RightDown: "",
LeftDown: "",
RightUp: "",
LeftUp: "",
Scale: false,//是否按比例缩放
//预览对象设置
View: "",//预览对象
viewWidth: 100,//预览宽度
viewHeight: 100//预览高度
};
Object.extend(this.options, options || {});
},
//初始化对象
Init: function() {
var oThis = this;
//设置容器
this.Container.style.width = this.Width + "px";
this.Container.style.height = this.Height + "px";
//设置拖放对象
this.Drag.style.top = this.dragTop + "px";
this.Drag.style.left = this.dragLeft + "px";
this.Drag.style.width = this.dragWidth + "px";
this.Drag.style.height = this.dragHeight + "px";
//设置切割对象
this._pic.src = this._cropper.src = this.Url;
this._pic.style.width = this._cropper.style.width = this.Width + "px";
this._pic.style.height = this._cropper.style.height = this.Height + "px";
if(isIE){
this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
} else {
this._pic.style.opacity = this.Opacity / 100;
}
//设置预览对象
if(this.View){ this._view.src = this.Url; }
//设置拖放
this._drag.mxRight = this.Width; this._drag.mxBottom = this.Height;
//设置缩放
if(this._resize){ this._resize.mxRight = this.Width; this._resize.mxBottom = this.Height; this._resize.Scale = this.Scale; }
},
//设置获取缩放对象
GetResize: function() {
var op = this.options;
//有触发对象时才设置
if(op.RightDown || op.LeftDown || op.RightUp || op.LeftUp || op.Right || op.Left || op.Up || op.Down ){
var oThis = this, _resize = new Resize(this.Drag, { Limit: true, onResize: function(){ oThis.SetPos(); } });
//设置缩放触发对象
if(op.RightDown){ _resize.Set(op.RightDown, "right-down"); }
if(op.LeftDown){ _resize.Set(op.LeftDown, "left-down"); }
if(op.RightUp){ _resize.Set(op.RightUp, "right-up"); }
if(op.LeftUp){ _resize.Set(op.LeftUp, "left-up"); }
if(op.Right){ _resize.Set(op.Right, "right"); }
if(op.Left){ _resize.Set(op.Left, "left"); }
if(op.Up){ _resize.Set(op.Up, "up"); }
if(op.Down){ _resize.Set(op.Down, "down"); }
return _resize;
} else { return null; }
},
//设置切割
SetPos: function() {
var o = this.Drag;
//按拖放对象的参数进行切割
this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
//切割预览
if(this.View) this.PreView();
},
//切割预览
PreView: function() {
//按比例设置宽度和高度
var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
//获取对应比例尺寸
var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
//设置样式
styleView.width = pw + "px"; styleView.height = ph + "px";
styleView.top = - pt + "px "; styleView.left = - pl + "px";
//切割预览图
styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
}
}
var ic = new ImgCropper("bgDiv", "dragDiv", "../image/Sunset.jpg", 300, 400, {
dragTop: 50, dragLeft: 50,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
View: "viewDiv", viewWidth: 200, viewHeight: 200
})
</script>
<script>
//设置图片大小
function Size(w, h){
ic.Width = w;
ic.Height = h;
ic.Init();
}
//换图片
function Pic(url){
ic.Url = url;
ic.Init();
}
//设置透明度
function Opacity(i){
ic.Opacity = i;
ic.Init();
}
//是否使用比例
function Scale(b){
ic.Scale = b;
ic.Init();
}
</script>
<br />
<br />
<div>
<input name="" type="button" value=" 增肥 " onclick="Size(500,400)" />
<input name="" type="button" value=" 还原 " onclick="Size(300,400)" />
</div>
<br />
<div>
<input name="" type="button" value=" 换图 " onclick="Pic('2.jpg')" />
<input name="" type="button" value=" 还原 " onclick="Pic('1.jpg')" />
</div>
<br />
<div>
<input name="" type="button" value=" 透明 " onclick="Opacity(0)" />
<input name="" type="button" value=" 还原 " onclick="Opacity(50)" />
</div>
<br />
<div>
<input name="" type="button" value="使用比例" onclick="Scale(true)" />
<input name="" type="button" value="取消比例" onclick="Scale(false)" />
</div>
<br />
<div>
<input name="" type="button" value="生成图片" onclick="Create()" />
<br />
<img id="imgCreat" />
</div>
<script>
function Create(){
var p = ic.Url,
x = ic.Drag.offsetLeft,
y = ic.Drag.offsetTop,
w = ic.Drag.offsetWidth,
h = ic.Drag.offsetHeight,
pw = ic.Width,
ph = ic.Height;
$("imgCreat").src = "/createServlet?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph;
}
</script>
</body>
</html>
发表评论
-
synchronized(this)的一些理解
2011-12-06 18:58 947对synchronized(this)的 ... -
Comparator和Comparable在排序中的应用
2011-07-30 11:21 864当需要排序的集合或数组不是单纯的数字型时,通常可以使用Co ... -
如何将文件中Base64进制数据生成X509证书
2010-12-16 19:50 2670byte[] ciphertext1 = new BASE64 ... -
Java相关数字签名技术纪要
2010-12-16 18:59 1179一:需要包含的包 ... -
jdom通过string生产xml文档
2010-12-09 10:50 1043生产xml文档: XMLOutputter outpu ... -
Tomcat支持Https访问
2010-11-10 20:01 3160用Tomcat来配置SSL主要有下面这么两大步骤: 一、生成证 ... -
一个tomcat配置多个端口
2010-10-19 18:43 3040第一步、修改server.xml[..\Tomcat 6.0\ ... -
Servlet上传文件及发送HTTP请求至Servet上传文件。
2010-08-12 18:30 1624Servlet接受HTTP消息,解析内容并输出至文件中 // ... -
如何在工程指定目录下保存文件。
2010-08-11 18:59 11701:Servlet中 String fileDir ... -
各进制基本概念。
2010-07-30 12:26 1114二进制: 二进制是逢2进位的进位制,0、 ... -
Junit小结
2010-07-20 08:58 623一 几个常用注释 @Before 被它注释的方法, ... -
JMockit_UT小结
2010-07-15 16:11 11141:模拟方法抛出异常 fin ... -
如何将当前时间延迟至指定的年、月、日后日期。
2010-06-23 19:27 983Calendar cale = Calenda ... -
tomcat添加gzip功能
2010-03-04 15:24 1991在文件tomcat/conf/server.xml 中添加红 ... -
HttpClient笔记
2010-01-16 20:03 3295背景:因为想写一个测试tomcat连接的程序,就试试自已去构造 ... -
ThreadLocal知识
2009-11-14 21:57 2665首先,ThreadLocal 不是用来解决共享对象的多线程访问 ... -
一个不错的JDBC连接池教程(带具体例子)
2009-06-11 21:17 1209关键字: jdbc 1.前言 数据库应用,在许多软件系统中 ... -
Java程序对图片的各种处理
2009-06-11 21:12 1590关键字: 缩放图像、图像切割、图像类型转换、彩色转为黑白 Ja ... -
Java计算时间差
2009-06-11 21:10 5801比如:现在是2004-03-26 13:31:40 ... -
Unable to instantiate Action(关于struts2.0异常)
2009-05-17 20:39 7771[ERROR] - [2009-03-12 14:27:59] ...
相关推荐
java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小...
用java如何把图片处理到指定大小 切割程序如下: public void cut(String srcImageFile,FileOutputStream fileout, int w, int h, int x1, int y1, int sw, int sh) { // TODO Auto-generated method stub try ...
java图片处理工具类,里面提供常用的图片处理类,包括缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等。
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
JAVA使用POI替换文本和图片,解决分割异常替换不完全的问题
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
自己写的 spire.pdf 简单的demo ,有一些基础的使用方法,对刚接触的小伙伴...分割pdf ,包括按总页数,每页分割为一个 pdf文件,由于免费版原因,可以每9页生成一个pdf,或者根据 指定页数 (页) 根据指定页数 分割pdf
Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...
12反射 是java程序开发的特征之一,允许java程序对自身进行检查,并能直接操作程序的内部属性; instanceof操作符,instanceof.java; 获取类的信息,ViewClassInfoJrame.java; 动态调用类的方法,CallMetod.java; ...
Java数组倒置 简单 Java图片加水印,支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印...
实例85 寻找指定字符第一次出现的位置 114 实例86 寻找指定字符最后出现的位置 115 实例87 我究竟有多长 116 实例88 替换指定的字符 117 实例89 分割字符串 117 实例90 如何使用substring()...
第1篇 Java编程基础 第1章 Java开发环境的搭建(教学视频:9分钟) 2 ...实例288 如何对网页进行重新定向 560 实例289 在Internet上搜索对象 560 实例290 LAN使用代理服务器 562 实例291 BBS论坛服务器端 567 实例292 ...
实例85 寻找指定字符第一次出现的位置 114 实例86 寻找指定字符最后出现的位置 115 实例87 我究竟有多长 116 实例88 替换指定的字符 117 实例89 分割字符串 117 实例90 如何使用substring()方法...
实例85 寻找指定字符第一次出现的位置 114 实例86 寻找指定字符最后出现的位置 115 实例87 我究竟有多长 116 实例88 替换指定的字符 117 实例89 分割字符串 117 实例90 如何使用substring()方法截取子串 118 ...