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>
