js實(shí)現(xiàn)截圖功能

1、js實(shí)現(xiàn)截圖功能javascript 2010-08-11 17:12:53 閱讀723 評論0 字號(hào)：大中小 訂閱 今日想試下弄個(gè)截圖功能，在網(wǎng)上找了些資料，終于把它實(shí)現(xiàn)了，步驟如下：首先要準(zhǔn)備4個(gè)js文件：1）prototype.jsvar Class = create: function() return function() this.initialize.apply(this, arguments); var Extend = function(destination, source) for (var property in source) destinationproperty

2、= sourceproperty; var Bind = function(object, fun) return function() return fun.apply(object, arguments); var BindAsEventListener = function(object, fun) var args = Atotype.slice.call(arguments).slice(2); return function(event) return fun.apply(object, event | window.event.concat(args); var

3、CurrentStyle = function(element) return element.currentStyle | document.defaultView.getComputedStyle(element, null);function addEventHandler(oTarget, sEventType, fnHandler) if (oTarget.addEventListener) oTarget.addEventListener(sEventType, fnHandler, false); else if (oTarget.attachEvent) oTarget.att

4、achEvent(on + sEventType, fnHandler); else oTargeton + sEventType = fnHandler; ;function removeEventHandler(oTarget, sEventType, fnHandler) if (oTarget.removeEventListener) oTarget.removeEventListener(sEventType, fnHandler, false); else if (oTarget.detachEvent) oTarget.detachEvent(on + sEventType, f

5、nHandler); else oTargeton + sEventType = null; ;2）ImgCropper.js/圖片切割var ImgCropper = Class.create();ImgCtotype = /容器對象,控制層,圖片地址 initialize: function(container, handle, url, options) this._Container = $(container); /容器對象 this._layHandle = $(handle); /控制層 this.Url = url; /圖片地址 this._layBase

6、= this._Container.appendChild(document.createElement(img); /底層 this._layCropper = this._Container.appendChild(document.createElement(img); /切割層 this._layCropper.onload = Bind(this, this.SetPos); /用來設(shè)置大小 this._tempImg = document.createElement(img); this._tempImg.onload = Bind(this, this.SetSize); thi

7、s.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); /設(shè)置預(yù)覽對象 var oPreview =

8、$(this.options.Preview); /預(yù)覽對象 if (oPreview) oPreview.style.position = relative; oPreview.style.overflow = hidden; this.viewWidth = Math.round(this.options.viewWidth); this.viewHeight = Math.round(this.options.viewHeight); /預(yù)覽圖片對象 this._view = oPreview.appendChild(document.createElement(img); this._

9、view.style.position = absolute; this._view.onload = Bind(this, this.SetPreview); /設(shè)置拖放 this._drag = new Drag(this._layHandle, Limit: true, onMove: Bind(this, this.SetPos), Transparent: true ); /設(shè)置縮放 this.Resize = !this.options.Resize; if (this.Resize) var op = this.options, _resize = new Resize(this

10、._layHandle, Max: true, onResize: Bind(this, this.SetPos) ); /設(shè)置縮放觸發(fā)對象 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.

11、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); /設(shè)置縮放對象 this._resize = _resize;

12、/設(shè)置樣式 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._lay

13、Cropper.style.top = this._layCropper.style.left = 0; /對齊 /初始化設(shè)置 this.Init(); , /設(shè)置默認(rèn)屬性 SetOptions: function(options) this.options = /默認(rèn)值 Opacity: 50, /透明度(0到100) Color: , /背景色 Width: 0, /圖片高度 Height: 0, /圖片高度 /縮放觸發(fā)對象 Resize: false, /是否設(shè)置縮放 Right: , /右邊縮放對象 Left: , /左邊縮放對象 Up: , /上邊縮放對象 Down: , /下邊縮放

14、對象 RightDown: , /右下縮放對象 LeftDown: , /左下縮放對象 RightUp: , /右上縮放對象 LeftUp: , /左上縮放對象 Min: false, /是否最小寬高限制(為true時(shí)下面min參數(shù)有用) minWidth: 50, /最小寬度 minHeight: 50, /最小高度 Scale: false, /是否按比例縮放 Ratio: 0, /縮放比例(寬/高) /預(yù)覽對象設(shè)置 Preview: , /預(yù)覽對象 viewWidth: 0, /預(yù)覽寬度 viewHeight: 0/預(yù)覽高度 ; Extend(this.options, options

15、| ); , /初始化對象 Init: function() /設(shè)置背景色 this.Color & (this._Container.style.backgroundColor = this.Color); /設(shè)置圖片 this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url; /設(shè)置透明 if (isIE) this._layBase.style.filter = alpha(opacity: + this.Opacity + ); else this._layBase.style.opacity = t

16、his.Opacity / 100; /設(shè)置預(yù)覽對象 this._view & (this._view.src = this.Url); /設(shè)置縮放 if (this.Resize) with (this._resize) Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight; , /設(shè)置切割樣式 SetPos: function() /ie6渲染bug if (isIE6) with (this._layHandle.style)

17、 zoom = .9; zoom = 1; ; ; /獲取位置參數(shù) var p = this.GetPos(); /按拖放對象的參數(shù)進(jìn)行切割 this._layCropper.style.clip = rect( + p.Top + px + (p.Left + p.Width) + px + (p.Top + p.Height) + px + p.Left + px); /設(shè)置預(yù)覽 this.SetPreview(); , /設(shè)置預(yù)覽效果 SetPreview: function() if (this._view) /預(yù)覽顯示的寬和高 var p = this.GetPos(), s = t

18、his.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; /按比例設(shè)置參數(shù) var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale; /設(shè)置預(yù)覽對象 with (this._view.style) /設(shè)置樣式 width = pWidth + px; height = p

19、Height + px; top = -pTop + px ; left = -pLeft + px; /切割預(yù)覽圖 clip = rect( + pTop + px + (pLeft + s.Width) + px + (pTop + s.Height) + px + pLeft + px); , /設(shè)置圖片大小 SetSize: function() var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); /設(shè)置底圖和切割圖 this._layBase.style.w

20、idth = this._layCropper.style.width = s.Width + px; this._layBase.style.height = this._layCropper.style.height = s.Height + px; /設(shè)置拖放范圍 this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; /設(shè)置縮放范圍 if (this.Resize) this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; , /獲取當(dāng)前樣式 G

21、etPos: 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; /按比例設(shè)置 if (fixHeight) iWidth = (iHeight

22、 = fixHeight) * scale; if (fixWidth & (!fixHeight | iWidth fixWidth) iHeight = (iWidth = fixWidth) / scale; /返回尺寸對象 return Width: iWidth, Height: iHeight 3)Drag.js/拖放程序var Drag = Class.create();Dtotype = /拖放對象 initialize: function(drag, options) this.Drag = $(drag); /拖放對象 this._x = this._y =

23、0; /記錄鼠標(biāo)相對拖放對象的位置 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

24、.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 = thi

25、s.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.appendChild(document.createElement(div).style) width = height = 100%; b

26、ackgroundColor = #fff; filter = alpha(opacity:0); fontSize = 0; /修正范圍 this.Repair(); addEventHandler(this._Handle, mousedown, BindAsEventListener(this, this.Start); , /設(shè)置默認(rèn)屬性 SetOptions: function(options) this.options = /默認(rèn)值 Handle: , /設(shè)置觸發(fā)對象（不設(shè)置則使用拖放對象） Limit: false, /是否設(shè)置范圍限制(為true時(shí)下面參數(shù)有用,可以是負(fù)數(shù)) m

27、xLeft: 0, /左邊限制 mxRight: 9999, /右邊限制 mxTop: 0, /上邊限制 mxBottom: 9999, /下邊限制 mxContainer: , /指定限制在容器內(nèi) LockX: false, /是否鎖定水平方向拖放 LockY: false, /是否鎖定垂直方向拖放 Lock: false, /是否鎖定 Transparent: false, /是否透明 onStart: function(), /開始移動(dòng)時(shí)執(zhí)行 onMove: function(), /移動(dòng)時(shí)執(zhí)行 onStop: function() /結(jié)束移動(dòng)時(shí)執(zhí)行 ; Extend(this.opti

28、ons, options | ); , /準(zhǔn)備拖動(dòng) Start: function(oEvent) if(this.Lock) return; this.Repair(); /記錄鼠標(biāo)相對拖放對象的位置 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 = pars

29、eInt(CurrentStyle(this.Drag).marginTop) | 0; /mousemove時(shí)移動(dòng) mouseup時(shí)停止 addEventHandler(document, mousemove, this._fM); addEventHandler(document, mouseup, this._fS); if(isIE) /焦點(diǎn)丟失 addEventHandler(this._Handle, losecapture, this._fS); /設(shè)置鼠標(biāo)捕獲 this._Handle.setCapture(); else /焦點(diǎn)丟失 addEventHandler(windo

30、w, blur, this._fS); /阻止默認(rèn)動(dòng)作 oEvent.preventDefault(); ; /附加程序 this.onStart(); , /修正范圍 Repair: function() if(this.Limit) /修正錯(cuò)誤范圍參數(shù) this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); /如果有容器必須設(shè)置positio

31、n為relative或absolute來相對或絕對定位，并在獲取offset之前設(shè)置 !this._mxContainer | CurrentStyle(this._mxContainer).position = relative | CurrentStyle(this._mxContainer).position = absolute | (this._mxContainer.style.position = relative); , /拖動(dòng) Move: function(oEvent) /判斷是否鎖定 if(this.Lock) this.Stop(); return; ; /清除選擇 w

32、indow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); /設(shè)置移動(dòng)參數(shù) var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; /設(shè)置范圍限制 if(this.Limit) /設(shè)置范圍參數(shù) var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; /如果

33、設(shè)置了容器，再修正范圍參數(shù) 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); ; /修正移動(dòng)參數(shù) iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLef

34、t); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); /設(shè)置位置，并修正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(); , /停止拖動(dòng) Stop: function() /移除事件 removeEventHandl

35、er(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();Re

36、totype = /縮放對象 initialize: function(obj, options) this._obj = $(obj); /縮放對象 this._styleWidth = this._styleHeight = this._styleLeft = this._styleTop = 0; /樣式參數(shù) this._sideRight = this._sideDown = this._sideLeft = this._sideUp = 0; /坐標(biāo)參數(shù) this._fixLeft = this._fixTop = 0; /定位參數(shù) this._scaleLeft =

37、 this._scaleTop = 0; /定位坐標(biāo) this._mxSet = function(); /范圍設(shè)置程序 this._mxRightWidth = this._mxDownHeight = this._mxUpHeight = this._mxLeftWidth = 0; /范圍參數(shù) this._mxScaleWidth = this._mxScaleHeight = 0; /比例范圍參數(shù) this._fun = function(); /縮放執(zhí)行程序 /獲取邊框?qū)挾?var _style = CurrentStyle(this._obj); this._borderX = (

38、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(opti

39、ons); /范圍限制 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

40、.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._

41、mxContainer | CurrentStyle(this._mxContainer).position = relative | (this._mxContainer.style.position = relative); , /設(shè)置默認(rèn)屬性 SetOptions: function(options) this.options = /默認(rèn)值 Max: false, /是否設(shè)置范圍限制(為true時(shí)下面mx參數(shù)有用) mxContainer:, /指定限制在容器內(nèi) mxLeft: 0, /左邊限制 mxRight: 9999, /右邊限制 mxTop: 0, /上邊限制 mxBottom:

42、 9999, /下邊限制 Min: false, /是否最小寬高限制(為true時(shí)下面min參數(shù)有用) minWidth: 50, /最小寬度 minHeight: 50, /最小高度 Scale: false, /是否按比例縮放 Ratio: 0, /縮放比例(寬/高) onResize: function() /縮放時(shí)執(zhí)行 ; Extend(this.options, options | ); , /設(shè)置觸發(fā)對象 Set: function(resize, side) var resize = $(resize), fun; if(!resize) return; /根據(jù)方向設(shè)置 swit

43、ch (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 r

44、ight-down : default : fun = this.RightDown; ; /設(shè)置觸發(fā)對象 addEventHandler(resize, mousedown, BindAsEventListener(this, this.Start, fun); , /準(zhǔn)備縮放 Start: function(e, fun, touch) /防止冒泡(跟拖放配合時(shí)設(shè)置) e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true); /設(shè)置執(zhí)行程序 this._fun = fun; /樣式參數(shù)值 this._styleWi

45、dth = this._obj.clientWidth; this._styleHeight = this._obj.clientHeight; this._styleLeft = this._obj.offsetLeft; this._styleTop = this._obj.offsetTop; /四條邊定位坐標(biāo) this._sideLeft = e.clientX - this._styleWidth; this._sideRight = e.clientX + this._styleWidth; this._sideUp = e.clientY - this._styleHeight;

46、 this._sideDown = e.clientY + this._styleHeight; /top和left定位參數(shù) this._fixLeft = this._styleLeft + this._styleWidth; this._fixTop = this._styleTop + this._styleHeight; /縮放比例 if(this.Scale) /設(shè)置比例 this.Ratio = Math.max(this.Ratio, 0) | this._styleWidth / this._styleHeight; /left和top的定位坐標(biāo) this._scaleLeft

47、 = this._styleLeft + this._styleWidth / 2; this._scaleTop = this._styleTop + this._styleHeight / 2; ; /范圍限制 if(this.Max) /設(shè)置范圍參數(shù) var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; /如果設(shè)置了容器，再修正范圍參數(shù) if(!this._mxContainer) mxLeft = Math.max(mxLeft, 0); mxTop

48、 = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); ; /根據(jù)最小值再修正 mxRight = Math.max(mxRight, mxLeft + (this.Min ? this.minWidth : 0) + this._borderX); mxBottom = Math.max(mxBottom, mxTop + (this.Min ? this.minHeight : 0) + this._borderY); /由于轉(zhuǎn)向時(shí)要重新設(shè)置所以寫成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.min