1.Copper.htm 页面源码 找一幅图替换掉源码中的 2.jpg
<!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>JavaScript 图片切割效果（带拖放、缩放效果）</title>
<style type="text/css">
body,form{margin:auto;padding:0;font-size:12px;}
#imgurl {446px;}
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;5px; height:5px; z-index:500; font-size:0;}
#dragDiv{border:1px solid #000000;}
</style>
<script type="text/javascript">
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.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";
//Yoker.Wu前台缩放效果改善，图片加载完成后，得到缩放大小再初始化显示
var trueImg = new Image();
trueImg.src = this.Url;
//图片已经加载并缓存
if(trueImg.complete){
if(trueImg.width>oThis.Width || trueImg.height>oThis.Height){
if(this.Width/this.Height>trueImg.width/trueImg.height){
this.Width = parseInt(trueImg.width * this.Height/trueImg.height);
}else{
this.Height = parseInt(trueImg.height * this.Width/trueImg.width);
}
}else{
this.Width = trueImg.width;
this.Height = trueImg.height;
}
//设置容器
this.Container.style.width = this.Width + "px";
this.Container.style.height = this.Height + "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; }
}
//新加载的情况
trueImg.onload = function(){
if(this.width>oThis.Width || this.height>oThis.Height){
if(oThis.Width/oThis.Height>this.width/this.height){
oThis.Width = parseInt(this.width * oThis.Height/this.height);
}else{
oThis.Height = parseInt(this.height * oThis.Width/this.width);
}
}else{
oThis.Width = this.width;
oThis.Height = this.height;
}
//设置容器
oThis.Container.style.width = oThis.Width + "px";
oThis.Container.style.height = oThis.Height + "px";
//设置切割对象
oThis._pic.src = oThis._cropper.src = oThis.Url;
oThis._pic.style.width = oThis._cropper.style.width = oThis.Width + "px";
oThis._pic.style.height = oThis._cropper.style.height = oThis.Height + "px";
if(isIE){
oThis._pic.style.filter = "alpha(opacity:" + oThis.Opacity + ")";
} else {
oThis._pic.style.opacity = oThis.Opacity / 100;
}
//设置预览对象
if(oThis.View){ oThis._view.src = oThis.Url; }
//设置拖放
oThis._drag.mxRight = oThis.Width; oThis._drag.mxBottom = oThis.Height;
//设置缩放
if(oThis._resize){ oThis._resize.mxRight = oThis.Width; oThis._resize.mxBottom = oThis.Height; oThis._resize.Scale = oThis.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)";
}
}
</script>
</head>
<body scroll="auto">
<form action="">
<div style="background:#cfcfcf;padding:3px;">
<div>
地址：<input type="text" fid="imgurl" size="69" name="imgurl" value="http://localhost:3107/2.jpg" /><!--<input name="" type="button" value="换一张图" onclick="setPicture(this.form.imgurl.value);" />-->
</div>
<div>
显示：<select name="dispPercent" onchange="setDisplaySize(this.options[this.selectedIndex].value);"><option value="3">300%</option><option value="2.5">250%</option><option value="2">200%</option><option value="1.5">150%</option><option value="1" selected="true">100%</option><option value="0.8">80%</option><option value="0.6">60%</option><option value="0.5">50%</option><option value="0.4">40%</option><option value="0.3">30%</option><option value="0.2">20%</option><option value="0.1">10%</option><option value="0.5">5%</option></select>
尺寸：<select name="cutSize" onchange="setDragSize(this.options[this.selectedIndex].text);"><option>50*50</option><option selected="true">88*31</option><option>100*50</option><option>100*100</option><option>100*200</option><option>120*60</option></select>
<select name="ScaleStatus" onchange="setScale(this.options[this.selectedIndex].value);"><option value="1">等比例</option><option value="0">自由变换</option></select>
<select name="CroperSize"><option value="0">选择框大小</option><option value="1">选择框比例在实际图片中大小</option></select>
<input name="" type="button" value="生成图片" onclick="Create(this.form.CroperSize.options[this.form.CroperSize.selectedIndex].value);" />
</div>
</div>
</form>
<div>
<div id="viewDiv" style="200px; height:200px;float:left;display:inline;margin:3px 10px;"></div>
<div id="bgDiv" style="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>
</div>
<div id="imgCreateArea"></div>
<script type="text/javascript">
var ic = new ImgCropper("bgDiv", "dragDiv", "2.jpg", 500, 380, {
dragTop: 5, dragLeft: 5, dragWidth: 81, dragHeight: 33,
Scale: 1,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
View: "viewDiv", viewWidth: 200, viewHeight: 200
})
//重设显示区域大小
function setDisplaySize(percent){
ic.Width = 500 * percent;
ic.Height = 380 * percent;
ic.Init();
}
//重设拖动区域大小
function setDragSize(size){
ic.dragWidth = size.split("*")[0];
ic.dragHeight = size.split("*")[1];
ic.Init();
}
//重新设置图片
function setPicture(url){
ic.Width = 500;
ic.Height = 380;
ic.Url = url.indexOf("http://") != -1 ? "Cropper.ashx?p=" + url : url;
ic.Init();
}
//是否按比例拖动区域变换
function setScale(val){
ic.Scale = val==1?true:false;
ic.Init();
}
function Create(s){
var p = ic.Url.replace("Cropper.ashx?p=", ""),
x = ic.Drag.offsetLeft,
y = ic.Drag.offsetTop,
w = ic.Drag.offsetWidth,
h = ic.Drag.offsetHeight,
pw = parseInt(ic.Width),
ph = parseInt(ic.Height);
$("imgCreateArea").appendChild(document.createElement("img")).src = "Cropper.ashx?s=" + s + "&p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&r=" + Math.random();
}
</script>
</body>
</html>
2.Cropper.ashx程序源码
using System.Drawing;
using System.IO;
public class Cropper : IHttpHandler
{
public bool IsReusable
{
get
{
return false;
}
}
public void ProcessRequest(HttpContext context)
{
string PicPath = Convert.ToString(context.Request.QueryString["p"]);
if (String.IsNullOrEmpty(PicPath)) { return; } //前面红色部分换成“if (null == PicPath || "" == PicPath) { return; }”则可以在.Net1.1环境下运行
int PointX = Convert.ToInt32(context.Request.QueryString["x"]);
int PointY = Convert.ToInt32(context.Request.QueryString["y"]);
int imgWidth = Convert.ToInt32(context.Request.QueryString["w"]);
int imgHeight = Convert.ToInt32(context.Request.QueryString["h"]);
int PicWidth = Convert.ToInt32(context.Request.QueryString["pw"]);
int PicHeight = Convert.ToInt32(context.Request.QueryString["ph"]);
int ScaleSize = Convert.ToInt32(context.Request.QueryString["s"]);
context.Response.ContentType = "image/jpeg";
if (imgWidth == 0 || imgHeight == 0 || PicWidth == 0 || PicHeight == 0)
{
if (PicPath.StartsWith("http://"))
{
GetImgStream(PicPath).WriteTo(context.Response.OutputStream);
}
else
{
context.Response.WriteFile(PicPath);
}
}
else
{
ImageCroper(PicPath, PicWidth, PicHeight, PointX, PointY, imgWidth, imgHeight, ScaleSize).WriteTo(context.Response.OutputStream);
}
}
/// <summary>
/// 返回裁剪后的图片数据流
/// </summary>
/// <param name="PicPath"></param>
/// <param name="PicWidth"></param>
/// <param name="PicHeight"></param>
/// <param name="PointX"></param>
/// <param name="PointY"></param>
/// <param name="imgWidth"></param>
/// <param name="imgHeight"></param>
/// <returns></returns>
public MemoryStream ImageCroper(string PicPath, int PicWidth, int PicHeight, int PointX, int PointY, int imgWidth, int imgHeight, int ScaleSize)
{
Image imgPicture = null;
if (PicPath.StartsWith("http://"))
{
imgPicture = Image.FromStream(GetImgStream(PicPath));
}
else
{
imgPicture = Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(PicPath));
}
if (imgPicture == null) { imgPicture = Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("error.jpg")); }
MemoryStream stream = new MemoryStream();
//切图实际图片的大小
int Width = imgWidth * imgPicture.Width / PicWidth;
int Height = imgHeight * imgPicture.Height / PicHeight;
if (ScaleSize == 1)
{
//所选区域在真实图片中的大小切出来的图
Bitmap bmPhoto = new Bitmap(Width, Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
gbmPhoto.DrawImage(imgPicture, new Rectangle(0, 0, Width, Height), PointX * imgPicture.Width / PicWidth, PointY * imgPicture.Height / PicHeight, Width, Height, GraphicsUnit.Pixel);
bmPhoto.Save(HttpContext.Current.Server.MapPath("upload/big.jpeg"), System.Drawing.Imaging.ImageFormat.Jpeg);
bmPhoto.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
gbmPhoto.Dispose();
bmPhoto.Dispose();
}
else
{
//所选区域在前台比例缩放后切出来的图
Bitmap ThumbnailPhoto = new Bitmap(imgWidth, imgHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gThumbnailPhoto = Graphics.FromImage(ThumbnailPhoto);
gThumbnailPhoto.DrawImage(imgPicture, new Rectangle(0, 0, imgWidth, imgHeight), PointX * imgPicture.Width / PicWidth, PointY * imgPicture.Height / PicHeight, Width, Height, GraphicsUnit.Pixel);
ThumbnailPhoto.Save(HttpContext.Current.Server.MapPath("upload/small.jpeg"), System.Drawing.Imaging.ImageFormat.Jpeg);
ThumbnailPhoto.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
gThumbnailPhoto.Dispose();
ThumbnailPhoto.Dispose();
}
imgPicture.Dispose();
return stream;
}
/// <summary>
/// 获取指定位置的图片数据流
/// </summary>
/// <param name="PicPath"></param>
/// <returns></returns>
private MemoryStream GetImgStream(string PicHttpPath)
{
Uri imgUri = new Uri(PicHttpPath);
System.Net.HttpWebRequest request = (System.Net.HttpWebRequest)System.Net.HttpWebRequest.Create(imgUri);
request.KeepAlive = false;
request.Accept = "*/*";
request.Referer = imgUri.AbsoluteUri.Replace(imgUri.AbsolutePath, "");
request.UserAgent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Yoker.Wu@gmail.com;ImgCropper System V1.0)";
System.Net.HttpWebResponse response = (System.Net.HttpWebResponse)request.GetResponse();
try
{
MemoryStream imgStream = new MemoryStream();
byte[] buffer = new byte[0x1000];
//只(按顺序)读数据流
Stream tmpStream = response.GetResponseStream();
while (true)
{
int size = tmpStream.Read(buffer, 0, 0x1000);
if (size <= 0) { break; }
imgStream.Write(buffer, 0, size);
}
return imgStream;
}
finally
{
request.Abort();
response.Close();
}
}