adminsun
- 浏览: 109250 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (53)
- JavaBase (26)
- Java--strutsFrameWork (3)
- Java-HibernateFrameWork (0)
- Java--springFrameWork (10)
- Exception Summary (1)
- Java--Tomcat (0)
- JavaScript and Ajax (2)
- Programming Word (1)
- Search Engine (0)
- MySQLDatabase (0)
- OrcalDatabase (0)
- SQLserverDatabase (0)
- 各种配置 (0)
- 学习总结 (1)
- 个人随笔 (4)
- 个人情感 (2)
最新评论
-
jiazhen1021：
...
Spring框架中的Bean对象的生命周期 -
zzjmates：
很浅显的东西，没有讲到本质
深度解析JSP工作原理 -
knightjames：
好文章，虽然只是看懂一部分
深度解析JSP工作原理 -
jarip：
好文章就是看一遍就能清楚个大概,
深度解析JSP工作原理 -
qq672076266：
good
pageContext对象
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>
分享到：
发表评论
-
JS..........
2009-12-04 03:22 14211.Jquery支持JSON 发送请求的方法 $ ... -
HTML
2009-12-04 03:20 1174<table> <tr> & ... -
DOM那点事儿。。
2009-12-02 00:35 1426DOM简介 DOM的接口和类 ... -
转载啊
2009-12-01 22:13 1226<!DOCTYPE html PUBLIC &qu ... -
JSP的7个动作指令
2009-11-30 17:10 1979JSP动作指令主要有如 ... -
JSP内置对象
2009-11-30 17:00 1906JSP脚本中包含9个内置对象，这9个内置对象都是Serv ... -
Exception对象
2009-11-30 16:38 1177Exception对象是Throwable的子类,代表着JSP ... -
pageContext对象
2009-11-30 16:19 10640使用pageContext可以访问page、reques ... -
JDBC即(JAVA_DATABASE_CONNECTION)一
2009-11-30 14:36 12452 - 连接 本概 ... -
Js实现图片切割
2009-11-30 01:21 2186//图片切割 var ImgCropper = Cla ... -
Js获取所有文本节点
2009-11-30 00:25 4376<script type="text/ ... -
AJAX的校验
2009-11-29 23:27 1083Validate.html <html> ... -
ANT工具使用
2009-11-28 00:23 1554ant使用： 1.下载ant构建工具1.7.1 2. ... -
编程单词
2009-11-28 00:21 923+release #n.释放, 排放, 解除释放令公映 ... -
JavaEnum
2009-11-27 15:32 835public class WeekDay { ... -
JS中获取节点下元素
2009-11-26 23:01 2004<html> <head> ... -
JavaScript遍历数组
2009-11-22 17:37 1337function ForInDemo() { // 创 ... -
Javascript数组遍历
2009-11-22 17:32 1271function ForInDemo() { // 创 ... -
JavaScript的一个随即例子
2009-11-22 01:44 935<!DOCTYPE HTML PUBLIC " ... -
Swing小程序
2009-11-22 01:17 820import java.awt.*; import ...
相关推荐
一个完整的图片上传剪切图像功能，而且是java版本，下了不后悔，
实现缩放比例，保存等功能。下载以后可以根据自己需求更改。
使用java和一个jquery插件弄的图像切割。类似于网站会员上传头像的功能。 访问地址：/NewImg/uploadimage.jsp 和:/NewImg/imgsel/piccut.jsp 两个地方用的不同javascript代码。 自动创建文件夹，如果文件夹中的文件...
jquery图片切割 滤镜功能，可设定大小范围，按照大范围切取图片，有写好的java后台，经测试可以正常使用。
由于工作需要将网页保存为图片，存...自己编写了一个小工具，可自动将图片分割为A4大小，如果有切到文字或图片，可拖动分割线微调，调好后生成即可保存为顺序的图片，非常方便，源代码奉上，有需要类似需求的可以参考。
https://www.cctv3.net/codes/java-image-spliter.html
前段时间，在网上找了个图片切割的例子，但是用.net写的，现在用Java也可以图片切割了
java 头像截图 java切割图片 类似头像上传前的截取头像
java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小获取指定大小图片 以及图片尺寸处理 等等java图片处理 根据大小...
Java图片处理 包括图片缩放 图片切割 图片格式转换 图片彩色变黑白！
java 水印 图像处理 图片分割 裁剪 缩放 功能 且带整个程序的整合， 和单元测试对单独功能的处理 操作，并可以通过打印 发送传真，全部
本程序可让二十多张图片自由切换，当选中当前图片时候点击开始游戏可把当前图片N*N任意等分成N²个小方格，且随机打乱没有死局，带有自动寻步，还带有局域网联机功能（可能有BUG）不过单机屡试不爽
java 图片压缩 图片切割
图片处理继续 实现等比缩放 大小控制 使用java实现 希望对大家有帮助
JAVA实现的图片剪切预览，使用JQUERY控件实现图片的页面裁剪，然后通过JAVA后台实现对图片的剪切处理
该文档描述java对图片操作，其中包括图片缩放，旋转绘制，图片切割，透明处理，忽略图片中某种颜色等。文档附源码+测试+效果图
高清缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等 功能非常强大，并且很清晰，请给好评：）
基于java的图像分割（数字图像处理），程序中包含 全局阈值分割，Roberts边缘检测分割，灰度图像，直方图。
主要介绍了java实现上传图片进行切割的方法,以完整实例形式分析了Java针对上传图片进行切割的技巧,非常具有实用价值,需要的朋友可以参考下
实现图片切割功能，适合初步认识使用