js实现截图功能.docx
《js实现截图功能.docx》由会员分享，可在线阅读，更多相关《js实现截图功能.docx（33页珍藏版）》请在冰豆网上搜索。
js实现截图功能
js实现截图功能javascript2010-08-1117:
12:
53阅读723评论0字号：
大中小订阅
今日想试下弄个截图功能，在网上找了些资料，终于把它实现了，步骤如下：
首先要准备4个js文件：
1）prototype.js
varClass={
create:
function（）{
returnfunction（）{this.initialize.apply（this,arguments）;}
}
}
varExtend=function（destination,source）{
for（varpropertyinsource）{
destination[property]=source[property];
}
}
varBind=function（object,fun）{
returnfunction（）{
returnfun.apply（object,arguments）;
}
}
varBindAsEventListener=function（object,fun）{
varargs=Array.prototype.slice.call（arguments）.slice
（2）;
returnfunction（event）{
returnfun.apply（object,[event||window.event].concat（args））;
}
}
varCurrentStyle=function（element）{
returnelement.currentStyle||document.defaultView.getComputedStyle（element,null）;
}
functionaddEventHandler（oTarget,sEventType,fnHandler）{
if（oTarget.addEventListener）{
oTarget.addEventListener（sEventType,fnHandler,false）;
}elseif（oTarget.attachEvent）{
oTarget.attachEvent（"on"+sEventType,fnHandler）;
}else{
oTarget["on"+sEventType]=fnHandler;
}
};
functionremoveEventHandler（oTarget,sEventType,fnHandler）{
if（oTarget.removeEventListener）{
oTarget.removeEventListener（sEventType,fnHandler,false）;
}elseif（oTarget.detachEvent）{
oTarget.detachEvent（"on"+sEventType,fnHandler）;
}else{
oTarget["on"+sEventType]=null;
}
};
2）ImgCropper.js
//图片切割
varImgCropper=Class.create（）;
ImgCropper.prototype={
//容器对象,控制层,图片地址
initialize:
function（container,handle,url,options）{
this._Container=$（container）;//容器对象
this._layHandle=$（handle）;//控制层
this.Url=url;//图片地址
this._layBase=this._Container.appendChild（document.createElement（"img"））;//底层
this._layCropper=this._Container.appendChild（document.createElement（"img"））;//切割层
this._layCropper.onload=Bind（this,this.SetPos）;
//用来设置大小
this._tempImg=document.createElement（"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）;
//设置预览对象
varoPreview=$（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.appendChild（document.createElement（"img"））;
this._view.style.position="absolute";
this._view.onload=Bind（this,this.SetPreview）;
}
//设置拖放
this._drag=newDrag（this._layHandle,{Limit:
true,onMove:
Bind（this,this.SetPos）,Transparent:
true}）;
//设置缩放
this.Resize=!
!
this.options.Resize;
if（this.Resize）{
varop=this.options,_resize=newResize（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.
升级会员 