js截图

首先要准备4个js文件：

1）prototype.js

var Class = {
    create:function() {
       return function() { this.initialize.apply(this, arguments); }
    }
}

var Extend = function(destination, source) {
    for (varproperty in source) {
       destination[property] = source[property];
    }
}

var Bind = function(object, fun) {
    returnfunction() {
       return fun.apply(object, arguments);
    }
}

var BindAsEventListener = function(object, fun) {
    var args =Array.prototype.slice.call(arguments).slice(2);
    returnfunction(event) {
       return fun.apply(object, [event ||window.event].concat(args));
    }
}

var CurrentStyle = function(element) {
    returnelement.currentStyle ||document.defaultView.getComputedStyle(element, null);
}

function addEventHandler(oTarget, sEventType, fnHandler) {
    if(oTarget.addEventListener) {
       oTarget.addEventListener(sEventType, fnHandler, false);
    } else if(oTarget.attachEvent) {
       oTarget.attachEvent("on" + sEventType, fnHandler);
    } else{
       oTarget["on" + sEventType] = fnHandler;
    }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if(oTarget.removeEventListener) {
       oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if(oTarget.detachEvent) {
       oTarget.detachEvent("on" + sEventType, fnHandler);
    } else{
       oTarget["on" + sEventType] = null;
    }
};

2）ImgCropper.js

//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
   //容器对象,控制层,图片地址
    initialize:function(container, handle, url, options) {
       this._Container = $(container); //容器对象
       this._layHandle = $(handle); //控制层
       this.Url = url; //图片地址

       this._layBase =this._Container.a(document_createElement_x_x_x("img")); //底层
       this._layCropper =this._Container.a(document_createElement_x_x_x("img")); //切割层
       this._layCropper.onload = Bind(this, this.SetPos);
       //用来设置大小
       this._tempImg = document_createElement_x_x_x("img");
       this._tempImg.onload = Bind(this, this.SetSize);

       this.SetOptions(options);

       this.Opacity = Math.round(this.options.Opacity);
       this.Color = this.options.Color;
       this.Scale = !!this.options.Scale;
       this.Ratio = Math.max(this.options.Ratio, 0);
       this.Width = Math.round(this.options.Width);
       this.Height = Math.round(this.options.Height);

       //设置预览对象
       var oPreview = $(this.options.Preview); //预览对象
       if (oPreview) {
           oPreview.style.position = "relative";
           oPreview.style.overflow = "hidden";
           this.viewWidth = Math.round(this.options.viewWidth);
           this.viewHeight = Math.round(this.options.viewHeight);
           //预览图片对象
           this._view = oPreview.a(document_createElement_x_x_x("img"));
           this._view.style.position = "absolute";
           this._view.onload = Bind(this, this.SetPreview);
       }
       //设置拖放
       this._drag = new Drag(this._layHandle, { Limit: true, onMove:Bind(this, this.SetPos), Transparent: true });
       //设置缩放
       this.Resize = !!this.options.Resize;
       if (this.Resize) {
           var op = this.options, _resize = new Resize(this._layHandle, { Max:true, onResize: Bind(this, this.SetPos) });
           //设置缩放触发对象
           op.RightDown &&(_resize.Set(op.RightDown, "right-down"));
           op.LeftDown &&(_resize.Set(op.LeftDown, "left-down"));
           op.RightUp &&(_resize.Set(op.RightUp, "right-up"));
           op.LeftUp &&(_resize.Set(op.LeftUp, "left-up"));
           op.Right && (_resize.Set(op.Right,"right"));
           op.Left && (_resize.Set(op.Left,"left"));
           op.Down && (_resize.Set(op.Down,"down"));
           op.Up && (_resize.Set(op.Up,"up"));
           //最小范围限制
           this.Min = !!this.options.Min;
           this.minWidth = Math.round(this.options.minWidth);
           this.minHeight = Math.round(this.options.minHeight);
           //设置缩放对象
           this._resize = _resize;
       }
       //设置样式
       this._Container.style.position = "relative";
       this._Container.style.overflow = "hidden";
       this._layHandle.style.zIndex = 200;
       this._layCropper.style.zIndex = 100;
       this._layBase.style.position = this._layCropper.style.position ="absolute";
       this._layBase.style.top = this._layBase.style.left =this._layCropper.style.top = this._layCropper.style.left = 0;//对齐
       //初始化设置
       this.Init();
    },
   //设置默认属性
    SetOptions:function(options) {
       this.options = { //默认值
           Opacity: 50, //透明度(0到100)
           Color: "", //背景色
           Width: 0, //图片高度
           Height: 0, //图片高度
           //缩放触发对象
           Resize: false, //是否设置缩放
           Right: "", //右边缩放对象
           Left: "", //左边缩放对象
           Up: "", //上边缩放对象
           Down: "", //下边缩放对象
           RightDown: "", //右下缩放对象
           LeftDown: "", //左下缩放对象
           RightUp: "", //右上缩放对象
           LeftUp: "", //左上缩放对象
           Min: false, //是否最小宽高限制(为true时下面min参数有用)
           minWidth: 50, //最小宽度
           minHeight: 50, //最小高度
           Scale: false, //是否按比例缩放
           Ratio: 0, //缩放比例(宽/高)
           //预览对象设置
           Preview: "", //预览对象
           viewWidth: 0, //预览宽度
           viewHeight: 0//预览高度
       };
       Extend(this.options, options || {});
    },
   //初始化对象
    Init:function() {
       //设置背景色
       this.Color &&(this._Container.style.backgroundColor = this.Color);
       //设置图片
       this._tempImg.src = this._layBase.src = this._layCropper.src =this.Url;
       //设置透明
       if (isIE) {
           this._layBase.style.filter = "alpha(opacity:" + this.Opacity +")";
       } else {
           this._layBase.style.opacity = this.Opacity / 100;
       }
       //设置预览对象
       this._view && (this._view.src =this.Url);
       //设置缩放
       if (this.Resize) {
           with (this._resize) {
               Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth =this.minWidth; minHeight = this.minHeight;
           }
       }
    },
   //设置切割样式
    SetPos:function() {
       //ie6渲染bug
       if (isIE6) { with (this._layHandle.style) { zoom = .9; zoom = 1; };};
       //获取位置参数
       var p = this.GetPos();
       //按拖放对象的参数进行切割
       this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left +p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left +"px)";
       //设置预览
       this.SetPreview();
    },
   //设置预览效果
    SetPreview:function() {
       if (this._view) {
           //预览显示的宽和高
           var p = this.GetPos(), s = this.GetSize(p.Width, p.Height,this.viewWidth, this.viewHeight), scale = s.Height /p.Height;
           //按比例设置参数
           var pHeight = this._layBase.height * scale, pWidth =this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left *scale;
           //设置预览对象
           with (this._view.style) {
               //设置样式
               width = pWidth + "px"; height = pHeight + "px"; top = -pTop + "px"; left = -pLeft + "px";
               //切割预览图
               clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop +s.Height) + "px " + pLeft + "px)";
           }
       }
    },
   //设置图片大小
    SetSize:function() {
       var s = this.GetSize(this._tempImg.width, this._tempImg.height,this.Width, this.Height);
       //设置底图和切割图
       this._layBase.style.width = this._layCropper.style.width = s.Width+ "px";
       this._layBase.style.height = this._layCropper.style.height =s.Height + "px";
       //设置拖放范围
       this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;
       //设置缩放范围
       if (this.Resize) { this._resize.mxRight = s.Width;this._resize.mxBottom = s.Height; }
    },
   //获取当前样式
    GetPos:function() {
       with (this._layHandle) {
           return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth,Height: offsetHeight }
       }
    },
    //获取尺寸
    GetSize:function(nowWidth, nowHeight, fixWidth, fixHeight) {
       var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth /iHeight;
       //按比例设置
       if (fixHeight) { iWidth = (iHeight = fixHeight) * scale; }
       if (fixWidth && (!fixHeight ||iWidth > fixWidth)) { iHeight = (iWidth = fixWidth)/ scale; }
       //返回尺寸对象
       return { Width: iWidth, Height: iHeight }
    }
}

3)Drag.js

//拖放程序
var Drag = Class.create();
Drag.prototype = {
  //拖放对象
  initialize: function(drag, options) {
 this.Drag = $(drag); //拖放对象
 this._x = this._y = 0; //记录鼠标相对拖放对象的位置
 this._marginLeft = this._marginTop =0;  //记录margin
 //事件对象(用于绑定移除事件)
 this._fM = BindAsEventListener(this,this.Move);
 this._fS = Bind(this, this.Stop);
 
 this.SetOptions(options);
 
 this.Limit = !!this.options.Limit;
 this.mxLeft =parseInt(this.options.mxLeft);
 this.mxRight =parseInt(this.options.mxRight);
 this.mxTop = parseInt(this.options.mxTop);
 this.mxBottom =parseInt(this.options.mxBottom);
 
 this.LockX = !!this.options.LockX;
 this.LockY = !!this.options.LockY;
 this.Lock = !!this.options.Lock;
 
 this.onStart = this.options.onStart;
 this.onMove = this.options.onMove;
 this.onStop = this.options.onStop;
 
 this._Handle = $(this.options.Handle) ||this.Drag;
 this._mxContainer = $(this.options.mxContainer)|| null;
 
 this.Drag.style.position = "absolute";
 //透明
 if(isIE &&!!this.options.Transparent){
  //填充拖放对象
 with(this._Handle.a(document_createElement_x_x_x("div")).style){
   width = height = "100%";backgroundColor = "#fff"; filter = "alpha(opacity:0)"; fontSize =0;
  }
 }
 //修正范围
 this.Repair();
 addEventHandler(this._Handle, "mousedown",BindAsEventListener(this, this.Start));
  },
  //设置默认属性
  SetOptions: function(options) {
 this.options = {  //默认值
  Handle:  "",  //设置触发对象（不设置则使用拖放对象）
  Limit:  false, //是否设置范围限制(为true时下面参数有用,可以是负数)
  mxLeft:  0,  //左边限制
  mxRight: 9999,  //右边限制
  mxTop:  0,  //上边限制
  mxBottom: 9999,  //下边限制
  mxContainer: "", //指定限制在容器内
  LockX:  false,   //是否锁定水平方向拖放
  LockY:  false,  //是否锁定垂直方向拖放
  Lock:  false,   //是否锁定
  Transparent:false,   //是否透明
  onStart: function(){},   //开始移动时执行
  onMove:  function(){},  //移动时执行
  onStop:  function(){}   //结束移动时执行
 };
 Extend(this.options, options || {});
  },
  //准备拖动
  Start: function(oEvent) {
 if(this.Lock){ return; }
 this.Repair();
 //记录鼠标相对拖放对象的位置
 this._x = oEvent.clientX -this.Drag.offsetLeft;
 this._y = oEvent.clientY -this.Drag.offsetTop;
 //记录margin
 this._marginLeft =parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
 this._marginTop =parseInt(CurrentStyle(this.Drag).marginTop) || 0;
 //mousemove时移动 mouseup时停止
 addEventHandler(document, "mousemove",this._fM);
 addEventHandler(document, "mouseup",this._fS);
 if(isIE){
  //焦点丢失
  addEventHandler(this._Handle, "losecapture",this._fS);
  //设置鼠标捕获
  this._Handle.setCapture();
 }else{
  //焦点丢失
  addEventHandler(window, "blur", this._fS);
  //阻止默认动作
  oEvent.preventDefault();
 };
 //附加程序
 this.onStart();
  },
  //修正范围
  Repair: function() {
 if(this.Limit){
  //修正错误范围参数
  this.mxRight = Math.max(this.mxRight,this.mxLeft + this.Drag.offsetWidth);
  this.mxBottom = Math.max(this.mxBottom,this.mxTop + this.Drag.offsetHeight);
 //如果有容器必须设置position为relative或absolute来相对或绝对定位，并在获取offset之前设置
  !this._mxContainer ||CurrentStyle(this._mxContainer).position == "relative" ||CurrentStyle(this._mxContainer).position == "absolute" ||(this._mxContainer.style.position = "relative");
 }
  },
  //拖动
  Move: function(oEvent) {
 //判断是否锁定
 if(this.Lock){ this.Stop(); return; };
 //清除选择
 window.getSelection ?window.getSelection().removeAllRanges() :document.selection.empty();
 //设置移动参数
 var iLeft = oEvent.clientX - this._x, iTop =oEvent.clientY - this._y;
 //设置范围限制
 if(this.Limit){
  //设置范围参数
  var mxLeft = this.mxLeft, mxRight =this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
  //如果设置了容器，再修正范围参数
  if(!!this._mxContainer){
   mxLeft = Math.max(mxLeft,0);
   mxTop = Math.max(mxTop,0);
   mxRight = Math.min(mxRight,this._mxContainer.clientWidth);
   mxBottom = Math.min(mxBottom,this._mxContainer.clientHeight);
  };
  //修正移动参数
  iLeft = Math.max(Math.min(iLeft, mxRight -this.Drag.offsetWidth), mxLeft);
  iTop = Math.max(Math.min(iTop, mxBottom -this.Drag.offsetHeight), mxTop);
 }
 //设置位置，并修正margin
 if(!this.LockX){ this.Drag.style.left = iLeft -this._marginLeft + "px"; }
 if(!this.LockY){ this.Drag.style.top = iTop -this._marginTop + "px"; }
 //附加程序
 this.onMove();
  },
  //停止拖动
  Stop: function() {
 //移除事件
 removeEventHandler(document, "mousemove",this._fM);
 removeEventHandler(document, "mouseup",this._fS);
 if(isIE){
  removeEventHandler(this._Handle, "losecapture",this._fS);
  this._Handle.releaseCapture();
 }else{
  removeEventHandler(window, "blur",this._fS);
 };
 //附加程序
 this.onStop();
  }
};

4)Resize.js

//缩放程序
var Resize = Class.create();
Resize.prototype = {
  //缩放对象
  initialize: function(obj, options) {
 this._obj = $(obj); //缩放对象
 
 this._styleWidth = this._styleHeight =this._styleLeft = this._styleTop = 0; //样式参数
 this._sideRight = this._sideDown = this._sideLeft= this._sideUp = 0;  //坐标参数
 this._fixLeft = this._fixTop =0;  //定位参数
 this._scaleLeft = this._scaleTop =0;  //定位坐标
 
 this._mxSet = function(){}; //范围设置程序
 this._mxRightWidth = this._mxDownHeight =this._mxUpHeight = this._mxLeftWidth = 0; //范围参数
 this._mxScaleWidth = this._mxScaleHeight =0;  //比例范围参数
 
 this._fun = function(){}; //缩放执行程序
 
 //获取边框宽度
 var _style = CurrentStyle(this._obj);
 this._borderX = (parseInt(_style.borderLeftWidth)|| 0) + (parseInt(_style.borderRightWidth) || 0);
 this._borderY = (parseInt(_style.borderTopWidth)|| 0) + (parseInt(_style.borderBottomWidth) || 0);
 //事件对象(用于绑定移除事件)
 this._fR = BindAsEventListener(this,this.Resize);
 this._fS = Bind(this, this.Stop);
 
 this.SetOptions(options);
 //范围限制
 this.Max = !!this.options.Max;
 this._mxContainer = $(this.options.mxContainer)|| null;
 this.mxLeft =Math.round(this.options.mxLeft);
 this.mxRight =Math.round(this.options.mxRight);
 this.mxTop =Math.round(this.options.mxTop);
 this.mxBottom =Math.round(this.options.mxBottom);
 //宽高限制
 this.Min = !!this.options.Min;
 this.minWidth =Math.round(this.options.minWidth);
 this.minHeight =Math.round(this.options.minHeight);
 //按比例缩放
 this.Scale = !!this.options.Scale;
 this.Ratio = Math.max(this.options.Ratio,0);
 
 this.onResize = this.options.onResize;
 
 this._obj.style.position = "absolute";
 !this._mxContainer ||CurrentStyle(this._mxContainer).position == "relative" ||(this._mxContainer.style.position = "relative");
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options= {  //默认值
  Max:  false, //是否设置范围限制(为true时下面mx参数有用)
 mxContainer:"",  //指定限制在容器内
  mxLeft: 0,         //左边限制
  mxRight:9999,   //右边限制
  mxTop: 0,         //上边限制
  mxBottom:9999,   //下边限制
  Min: false,        //是否最小宽高限制(为true时下面min参数有用)
  minWidth:50,   //最小宽度
  minHeight:50,   //最小高度
  Scale: false,    //是否按比例缩放
  Ratio: 0,          //缩放比例(宽/高)
  onResize:function(){}   //缩放时执行
    };
   Extend(this.options, options || {});
  },
  //设置触发对象
  Set: function(resize, side) {
 var resize = $(resize), fun;
 if(!resize) return;
 //根据方向设置
 switch (side.toLowerCase()) {
 case "up" :
  fun = this.Up;
  break;
 case "down" :
  fun = this.Down;
  break;
 case "left" :
  fun = this.Left;
  break;
 case "right" :
  fun = this.Right;
  break;
 case "left-up" :
  fun = this.LeftUp;
  break;
 case "right-up" :
  fun = this.RightUp;
  break;
 case "left-down" :
  fun = this.LeftDown;
  break;
 case "right-down" :
 default :
  fun = this.RightDown;
 };
 //设置触发对象
 addEventHandler(resize, "mousedown",BindAsEventListener(this, this.Start, fun));
  },
  //准备缩放
  Start: function(e, fun, touch) {
 //防止冒泡(跟拖放配合时设置)
 e.stopPropagation ? e.stopPropagation() :(e.cancelBubble = true);
 //设置执行程序
 this._fun = fun;
 //样式参数值
 this._styleWidth = this._obj.clientWidth;
 this._styleHeight = this._obj.clientHeight;
 this._styleLeft = this._obj.offsetLeft;
 this._styleTop = this._obj.offsetTop;
 //四条边定位坐标
 this._sideLeft = e.clientX -this._styleWidth;
 this._sideRight = e.clientX +this._styleWidth;
 this._sideUp = e.clientY -this._styleHeight;
 this._sideDown = e.clientY +this._styleHeight;
 //top和left定位参数
 this._fixLeft = this._styleLeft +this._styleWidth;
 this._fixTop = this._styleTop +this._styleHeight;
 //缩放比例
 if(this.Scale){
  //设置比例
  this.Ratio = Math.max(this.Ratio, 0) ||this._styleWidth / this._styleHeight;
  //left和top的定位坐标
  this._scaleLeft = this._styleLeft +this._styleWidth / 2;
  this._scaleTop = this._styleTop +this._styleHeight / 2;
 };
 //范围限制
 if(this.Max){
  //设置范围参数
  var mxLeft = this.mxLeft, mxRight =this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
  //如果设置了容器，再修正范围参数
  if(!!this._mxContainer){
   mxLeft = Math.max(mxLeft,0);
   mxTop = Math.max(mxTop,0);
   mxRight = Math.min(mxRight,this._mxContainer.clientWidth);
   mxBottom = Math.min(mxBottom,this._mxContainer.clientHeight);
  };
  //根据最小值再修正
  mxRight = Math.max(mxRight, mxLeft + (this.Min ?this.minWidth : 0) + this._borderX);
  mxBottom = Math.max(mxBottom, mxTop + (this.Min? this.minHeight : 0) + this._borderY);
  //由于转向时要重新设置所以写成function形式
  this._mxSet = function(){
   this._mxRightWidth = mxRight -this._styleLeft - this._borderX;
   this._mxDownHeight = mxBottom- this._styleTop - this._borderY;
   this._mxUpHeight =Math.max(this._fixTop - mxTop, this.Min ? this.minHeight :0);
   this._mxLeftWidth =Math.max(this._fixLeft - mxLeft, this.Min ? this.minWidth :0);
  };
  this._mxSet();
  //有缩放比例下的范围限制
  if(this.Scale){
   this._mxScaleWidth =Math.min(this._scaleLeft - mxLeft, mxRight - this._scaleLeft -this._borderX) * 2;
   this._mxScaleHeight =Math.min(this._scaleTop - mxTop, mxBottom - this._scaleTop -this._borderY) * 2;
  };
 };
 //mousemove时缩放 mouseup时停止
 addEventHandler(document, "mousemove",this._fR);
 addEventHandler(document, "mouseup",this._fS);
 if(isIE){
  addEventHandler(this._obj, "losecapture",this._fS);
  this._obj.setCapture();
 }else{
  addEventHandler(window, "blur", this._fS);
  e.preventDefault();
 };
  },
  //缩放
  Resize: function(e) {
 //清除选择
 window.getSelection ?window.getSelection().removeAllRanges() :document.selection.empty();
 //执行缩放程序
 this._fun(e);
 //设置样式，变量必须大于等于0否则ie出错
 with(this._obj.style){
  width = this._styleWidth + "px"; height =this._styleHeight + "px";
  top = this._styleTop + "px"; left =this._styleLeft + "px";
 }
 //附加程序
 this.onResize();
  },
  //缩放程序
  //上
  Up: function(e) {
 this.RepairY(this._sideDown - e.clientY,this._mxUpHeight);
 this.RepairTop();
 this.TurnDown(this.Down);
  },
  //下
  Down: function(e) {
 this.RepairY(e.clientY - this._sideUp,this._mxDownHeight);
 this.TurnUp(this.Up);
  },
  //右
  Right: function(e) {
 this.RepairX(e.clientX - this._sideLeft,this._mxRightWidth);
 this.TurnLeft(this.Left);
  },
  //左
  Left: function(e) {
 this.RepairX(this._sideRight - e.clientX,this._mxLeftWidth);
 this.RepairLeft();
 this.TurnRight(this.Right);
  },
  //右下
  RightDown: function(e) {
 this.RepairAngle(
  e.clientX - this._sideLeft,this._mxRightWidth,
  e.clientY - this._sideUp,this._mxDownHeight
 );
 this.TurnLeft(this.LeftDown) || this.Scale ||this.TurnUp(this.RightUp);
  },
  //右上
  RightUp: function(e) {
 this.RepairAngle(
  e.clientX - this._sideLeft,this._mxRightWidth,
  this._sideDown - e.clientY,this._mxUpHeight
 );
 this.RepairTop();
 this.TurnLeft(this.LeftUp) || this.Scale ||this.TurnDown(this.RightDown);
  },
  //左下
  LeftDown: function(e) {
 this.RepairAngle(
  this._sideRight - e.clientX,this._mxLeftWidth,
  e.clientY - this._sideUp,this._mxDownHeight
 );
 this.RepairLeft();
 this.TurnRight(this.RightDown) || this.Scale ||this.TurnUp(this.LeftUp);
  },
  //左上
  LeftUp: function(e) {
 this.RepairAngle(
  this._sideRight - e.clientX,this._mxLeftWidth,
  this._sideDown - e.clientY,this._mxUpHeight
 );
 this.RepairTop(); this.RepairLeft();
 this.TurnRight(this.RightUp) || this.Scale ||this.TurnDown(this.LeftDown);
  },
  //修正程序
  //水平方向
  RepairX: function(iWidth, mxWidth) {
 iWidth = this.RepairWidth(iWidth, mxWidth);
 if(this.Scale){
  var iHeight =this.RepairScaleHeight(iWidth);
  if(this.Max &&iHeight > this._mxScaleHeight){
   iHeight =this._mxScaleHeight;
   iWidth =this.RepairScaleWidth(iHeight);
  }else if(this.Min&& iHeight <this.minHeight){
   var tWidth =this.RepairScaleWidth(this.minHeight);
   if(tWidth <mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
  }
  this._styleHeight = iHeight;
  this._styleTop = this._scaleTop - iHeight /2;
 }
 this._styleWidth = iWidth;
  },
  //垂直方向
  RepairY: function(iHeight, mxHeight) {
 iHeight = this.RepairHeight(iHeight,mxHeight);
 if(this.Scale){
  var iWidth =this.RepairScaleWidth(iHeight);
  if(this.Max &&iWidth > this._mxScaleWidth){
   iWidth =this._mxScaleWidth;
   iHeight =this.RepairScaleHeight(iWidth);
  }else if(this.Min&& iWidth <this.minWidth){
   var tHeight =this.RepairScaleHeight(this.minWidth);
   if(tHeight <mxHeight){ iWidth = this.minWidth; iHeight = tHeight; }
  }
  this._styleWidth = iWidth;
  this._styleLeft = this._scaleLeft - iWidth /2;
 }
 this._styleHeight = iHeight;
  },
  //对角方向
  RepairAngle: function(iWidth, mxWidth, iHeight,mxHeight) {
 iWidth = this.RepairWidth(iWidth, mxWidth);
 if(this.Scale){
  iHeight = this.RepairScaleHeight(iWidth);
  if(this.Max &&iHeight > mxHeight){
   iHeight = mxHeight;
   iWidth =this.RepairScaleWidth(iHeight);
  }else if(this.Min&& iHeight <this.minHeight){
   var tWidth =this.RepairScaleWidth(this.minHeight);
   if(tWidth <mxWidth){ iHeight = this.minHeight; iWidth = tWidth; }
  }
 }else{
  iHeight = this.RepairHeight(iHeight,mxHeight);
 }
 this._styleWidth = iWidth;
 this._styleHeight = iHeight;
  },
  //top
  RepairTop: function() {
 this._styleTop = this._fixTop -this._styleHeight;
  },
  //left
  RepairLeft: function() {
 this._styleLeft = this._fixLeft -this._styleWidth;
  },
  //height
  RepairHeight: function(iHeight, mxHeight){
 iHeight = Math.min(this.Max ? mxHeight : iHeight,iHeight);
 iHeight = Math.max(this.Min ? this.minHeight :iHeight, iHeight, 0);
 return iHeight;
  },
  //width
  RepairWidth: function(iWidth, mxWidth) {
 iWidth = Math.min(this.Max ? mxWidth : iWidth,iWidth);
 iWidth = Math.max(this.Min ? this.minWidth :iWidth, iWidth, 0);
 return iWidth;
  },
  //比例高度
  RepairScaleHeight: function(iWidth) {
 return Math.max(Math.round((iWidth +this._borderX) / this.Ratio - this._borderY), 0);
  },
  //比例宽度
  RepairScaleWidth: function(iHeight) {
 return Math.max(Math.round((iHeight +this._borderY) * this.Ratio - this._borderX), 0);
  },
  //转向程序
  //转右
  TurnRight: function(fun) {
 if(!(this.Min || this._styleWidth)){
  this._fun = fun;
  this._sideLeft = this._sideRight;
  this.Max &&this._mxSet();
  return true;
 }
  },
  //转左
  TurnLeft: function(fun) {
 if(!(this.Min || this._styleWidth)){
  this._fun = fun;
  this._sideRight = this._sideLeft;
  this._fixLeft = this._styleLeft;
  this.Max &&this._mxSet();
  return true;
 }
  },
  //转上
  TurnUp: function(fun) {
 if(!(this.Min || this._styleHeight)){
  this._fun = fun;
  this._sideDown = this._sideUp;
  this._fixTop = this._styleTop;
  this.Max &&this._mxSet();
  return true;
 }
  },
  //转下
  TurnDown: function(fun) {
 if(!(this.Min || this._styleHeight)){
  this._fun = fun;
  this._sideUp = this._sideDown;
  this.Max &&this._mxSet();
  return true;
 }
  },
  //停止缩放
  Stop: function() {
 removeEventHandler(document, "mousemove",this._fR);
 removeEventHandler(document, "mouseup",this._fS);
 if(isIE){
  removeEventHandler(this._obj, "losecapture",this._fS);
  this._obj.releaseCapture();
 }else{
  removeEventHandler(window, "blur",this._fS);
 }
  }
};

然后写一个处理程序，用来画出截图：

ImageCropper.ashx
<%@ WebHandler Language="c#" Class="ImageCropper"Debug="true" %>
using System;
using System.Web;
using System.Drawing;
using System.IO;

public class ImageCropper : IHttpHandler
{

    #regionIHttpHandler 成员
   
    public voidProcessRequest(HttpContext context)
    {
       string ImgPath = Convert.ToString(context.Request["p"]);
       int PointX = Convert.ToInt32(context.Request["x"]);
       int PointY = Convert.ToInt32(context.Request["y"]);
       int CutWidth = Convert.ToInt32(context.Request["w"]);
       int CutHeight = Convert.ToInt32(context.Request["h"]);
       int PicWidth = Convert.ToInt32(context.Request["pw"]);
       int PicHeight = Convert.ToInt32(context.Request["ph"]);

       context.Response.ContentType = "image/jpeg";
       ShowImage(HttpContext.Current.Server.MapPath(ImgPath), PointX,PointY, CutWidth, CutHeight, PicWidth,PicHeight).WriteTo(context.Response.OutputStream);
    }

private MemoryStream ShowImage(string path, int PointX, int PointY,int CutWidth, int CutHeight, int PicWidth, int PicHeight)
    {
       Image image = Image.FromFile(path);
       Bitmap bm = new Bitmap(CutWidth, CutHeight,System.Drawing.Imaging.PixelFormat.Format24bppRgb);
       Graphics graphics = Graphics.FromImage(bm);
       graphics.DrawImage(image, new Rectangle(0, 0, CutWidth, CutHeight),PointX * image.Width / PicWidth, PointY * image.Height / PicHeight,CutWidth * image.Width / PicWidth, CutHeight * image.Height /PicHeight, GraphicsUnit.Pixel);
       int a = path.LastIndexOf('.');
       int b = path.LastIndexOf('\\');
       string _newPic = path.Substring(0, b) + "\\new_" +DateTime.Now.ToFileTimeUtc().ToString("X") + ".jpg";
       bm.Save(_newPic, System.Drawing.Imaging.ImageFormat.Jpeg);
       MemoryStream ms = new MemoryStream();
       bm.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
       image.Dispose();
       graphics.Dispose();
       bm.Dispose();
       return ms;
    }
    public boolIsReusable
    {
       get
       {
           return false;
       }
    }
   
   #endregion
}

ImageCropper.htm代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>

   <script language="javascript" type="text/javascript"src="js/prototype.js"></script>

   <script language="javascript" type="text/javascript"src="js/ImgCropper.js"></script>

   <script language="javascript" type="text/javascript"src="js/Drag.js"></script>

   <script language="javascript" type="text/javascript"src="js/Resize.js"></script>

   <style type="text/css">
       #ViewDiv
       {
           width: 200px;
           height: 200px;
       }
       #bgDiv
       {
           width: 300px;
           height: 150px;
           position: relative;
       }
       #dragDiv
       {
           width: 100px;
           height: 80px;
           left: 50px;
           top: 50px;
           border: solid 1px #fff;
           cursor: move;
       }
       #dRightDown, #dLeftDown, #dLeftUp, #dRightUp, #dRight, #dLeft,#dUp, #dDown{
           position: absolute;
           background: #FFF;
           border: 1px solid #333;
           width: 6px;
           height: 6px;
           z-index: 500;
           font-size: 0;
           opacity: 0.5;
           filter: alpha(opacity=50);
       }
       #dLeftDown, #dRightUp
       {
           cursor: ne-resize;
       }
       #dRightDown, #dLeftUp
       {
           cursor: nw-resize;
       }
       #dRight, #dLeft
       {
           cursor: e-resize;
       }
       #dUp, #dDown
       {
           cursor: n-resize;
       }
       #dLeftDown
       {
           left: 0px;
           bottom: 0px;
       }
       #dRightUp
       {
           right: 0px;
           top: 0px;
          }
       #dRightDown
       {
           right: 0px;
           bottom: 0px;
           background-color: #00F;
       }
       #dLeftUp
       {
           left: 0px;
           top: 0px;
       }
       #dRight
       {
           right: 0px;
           top: 50%;
           margin-top: -4px;
       }
       #dLeft
       {
           left: 0px;
           top: 50%;
           margin-top: -4px;
       }
       #dUp
       {
           top: 0px;
           left: 50%;
           margin-left: -4px;
       }
       #dDown
       {
           bottom: 0px;
           left: 50%;
           margin-left: -4px;
       }
   </style>
   </head>
<body>
   <div id="bgDiv">
       <div id="dragDiv">
           <div id="dRightDown">
           </div>
           <div id="dLeftDown">
           </div>
           <div id="dRightUp">
           </div>
           <div id="dLeftUp">
           </div>
           <div id="dRight">
           </div>
           <div id="dLeft">
           </div>
           <div id="dDown">
           </div>
           <div id="dUp">
           </div>
       </div>
   </div>
   <div id="ViewDiv">
   </div>
   <br />
   <br />
   <input type="button" value="生成图片"onclick="create();" /><br/>
   <br />
   <img id="ShowImg" alt="" src="images/aa.gif"style="display: none;" />

   <script language="javascript"type="text/javascript">
       var isIE = (document.all) ? true : false; // 是否ie
       var isIE6 = isIE && ([/MSIE(\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
       var $ = function(id) {
           //返回id对象
           return "string" == typeof id ? document.getElementByIdx_x(id) :id;
       };
       var imgCropper = new ImgCropper("bgDiv","dragDiv", "images/aa.gif", {
           Width: 100,
           Height: 150,
           Color: "#FFF",
           Resize: true,
           Right: "dRight",
           Left: "dLeft",
           Up: "dUp",
           Down: "dDown",
           RightDown: "dRightDown",
           LeftDown: "dLeftDown",
           RightUp: "dRightUp",
           LeftUp: "dLeftUp",
           Preview: "ViewDiv"
           viewWidth: 200,  //这里要是不写的话预览截图就等同大
           viewHeight: 200
       })
       function create() {
           var path = imgCropper.Url;
           var o = imgCropper.GetPos();
           x = o.Left;
           y = o.Top;
           w = o.Width;
           h = o.Height;
           pw = imgCropper._layBase.width;
           ph = imgCropper._layBase.height;
           $("ShowImg").onload = function() { this.style.display = "block";}
           $("ShowImg").src = "ImageCropper.ashx?p=" + path +"&x=" + x + "&y=" + y +"&w=" + w + "&h=" + h +"&pw=" + pw + "&ph=" + ph +"&" + Math.random();
       }
   </script>

</body>
</html>