Javascript實現截圖功能(代碼)

好久沒來這裡了，迷糊了一段時間，為了儘快熱手，自己做了一個的js，首先是參看了一個博友的文章，心想也許自己可以用更少的代碼來實現，於是變有了這個小玩意的誕生。

　　

　　我其實比較忠實於原味的js，只是用到ajax的時候會選擇mootools的xhr包，辛苦的操作dom這麼久了覺得也是時候啟用便捷的架構提高效率了，前段時間經同事介紹認識了jquery，一見如故，done！這個的效果裡有兩個拖拽，jquery的外掛程式狠多，但我為了練手便決定棄用外掛程式！拖拽自己實現吧！

　　設計過程中充分考慮了最近流行的面對對象和代碼分離，頁面上只需寫上這麼幾句便可使用這個了。

<script language="javascript">
(document).ready(function (){
var imgCut1=new ImgCut("showHere","/mydog.jpg",150,200,100,100);
}
</script>
<div id="showHere"></div>
　　傳入參數為：ImgCut（在何處建立對象，原始圖片的地址，截取的寬度，截取的高度，截取框距外框左右邊距，截取框距外框上下邊距）。有點羅嗦，主要是為了增強適應性。

　　可以通過執行個體對象的這些屬性和方法擷取映像參數資訊：

尺寸:CutW，CutH

位置（相對於原始圖左上方）:GetCutLeft()，GetCutTop()

原始圖當前尺寸:GetImgWidth()，GetImgHeight()
　　當然別忘了在head裡引入檔案。

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="yuImgCut.js" type="text/javascript"></script>
<link href="yuImgCut.css" rel="stylesheet" type="text/css" />
　　在ImgCut的內部首先設計一個建構函式。

function ImgCut(containerName,imgSrc,cutW,cutH,dCutLeft,dCutTop){
this.ContainerName=containerName;
this.ImgSrc=imgSrc;
this.CutW=cutW;
this.CutH=cutH;
this.DCutLeft=dCutLeft;
this.DCutTop=dCutTop;
this.Fill();
}
　　參數的意義前面已經介紹過了，這些參數都設定了預設值。

ImgCut.prototype={
ContainerName:"",//在何處建立對象
ImgSrc:"",//原始圖片的地址
CutW:150,//截取的寬度
CutH:200,//截取的高度
DCutLeft:100,//截取框距外框左右邊距
DCutTop:100,//截取框距外框上下邊距
Fill:function(){}

}

 

<div class="imgCut1">
<div class="imgCut11">
<img class="imgCut111" src="/mydog.jpg">
<table class="imgCut112" border="0" cellpadding="0" cellspacing="0">
<tr><td/><td/><td/></tr><tr><td/><td class="main"/><td/></tr><tr><td/><td/><td/></tr>
</table>
</div>
<div class="imgCut12">
<div class="imgCut121"></div>
<div class="imgCut122">
<div class="imgCut1221"></div>
</div>
<div class="imgCut123"></div>
</div>
</div>
　　這裡的css都設定了預設的高寬。

.imgCut1{width:352px;height:422px;}
.imgCut11{width:350px;height:400px;position:relative;overflow:hidden; border:1px solid #999999;margin:0px auto}
.imgCut111{position:absolute;top:0px;left:0px;border:0px}
.imgCut112{position:absolute;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;cursor:pointer}
.imgCut112 td{background-color:#cccccc; width:100px; height:100px}
.imgCut112 td.main{width:150px; height:200px;border:1px solid #ffffff;background-color:transparent}
.imgCut12{width:249px;margin:0px auto}
.imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;width:19px;height:19px}
.imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;width:211px; position:relative}
.imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;width:11px;height:16px}
.imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;width:19px;height:19px}
　　為了實現的樣式效果，一些人的做法是用兩張圖片，截取框內一張，外面的大框裡再一張，把溢出的隱藏，再把大框裡的圖片調暗點，隨便拖動其中一張的時候也同時移動另一張，我在測試這種做法的時候發現容易使得兩張圖片移動時有點點的不同步，而且用吝嗇的眼光來看的話也有點浪費瀏覽器的運算資源，所以我設計了一個只用一張圖片加一個table來實現同樣的效果，table在web2.0裡不是不能用，而是要用得當。將table浮動在圖片上方，這樣就不好拖拽圖片了，於是我設計將拖拽分成兩個層，觸發層和移動層，table擔當觸發層，為了增強通用性和減少代碼量，便又設計觸發層和移動層在某些時候也可以成為一體，這樣一來，收縮圖片的捲軸的功能也同時完成了。具體代碼如下。

Drag:function(touchScreenName,dragName,rangeName,track,onDragFunction){
//滑鼠是否被按下
var isMouseDown=false;
//滑鼠上次移動的X座標
var cX=0;
//滑鼠上次移動的Y座標
var cY=0;
//觸控螢幕是否與拖拽對象分離
var jObjImgGrag=dragName && (dragName) || (touchScreenName);
//是否限制活動範圍
var rangeX=[];
var rangeY=[];
if(rangeName){
rangeX=[0,(rangeName).get(0).offsetWidth-jObjImgGrag.get(0).offsetWidth];
rangeY=[0,(rangeName).get(0).offsetHeight-jObjImgGrag.get(0).offsetHeight];
}
(touchScreenName).mousedown(function(){isMouseDown=true;(this).css("cursor","move");cX=0;cY=0;});
(document).mouseup(function(){isMouseDown=false;(touchScreenName).css("cursor","pointer");}).mousemove(function(e){
//這句很重要,使得拖拽更流暢
try {document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges();} catch(exp){}
if(!isMouseDown)
return;
if(cX==0 && cY==0){
cX=e.clientX;
cY=e.clientY;
}
if(track){
if(track=="h") cY=e.clientY;
if(track=="v") cX=e.clientX;
}
var newLeft=parseInt(jObjImgGrag.css("left").replace("px",""))+e.clientX-cX;
var newTop=parseInt(jObjImgGrag.css("top").replace("px",""))+e.clientY-cY;
if(rangeName){
newLeft=newLeft<rangeX[0] ? 0 : newLeft;
newLeft=newLeft>rangeX[1] ? rangeX[1] : newLeft;
newTop=newTop<rangeY[0] ? 0 : newTop;
newTop=newTop>rangeY[1] ? rangeY[1] : newTop;
}
//開始拖拽
jObjImgGrag.css({left:newLeft,top:newTop});
//拖拽時觸發的函數
onDragFunction && onDragFunction({left:newLeft,top:newTop});
cX=e.clientX;
cY=e.clientY;
});
}
　　在Fill()中調用這個方法。

this.Drag("#"+this.ContainerName+" .imgCut112","#"+this.ContainerName+" .imgCut111");
var jImgCut111=("#"+this.ContainerName+" .imgCut111");
var w=jImgCut111.get(0).offsetWidth;
var h=jImgCut111.get(0).offsetHeight;
var zoom=function(e){
var neww=parseInt(w/100*e.left);
var newh=parseInt(neww/w*h);
jImgCut111.css({width:neww,height:newh});
};
this.Drag("#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut122","h",zoom);
var jImgCut1221=("#"+this.ContainerName+" .imgCut1221");
("#"+this.ContainerName+" .imgCut123").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))+1;l=l>200?200:l;jImgCut1221.css("left",l);zoom({left:l});});
("#"+this.ContainerName+" .imgCut121").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))-1;l=l<0?0:l;jImgCut1221.css("left",l);zoom({left:l});});
　　通過伺服器端程式的時候，我們需要給他們一些定位的參數。

GetCutLeft:function(){
return this.DCutLeft-parseInt(("#"+this.ContainerName+" .imgCut111").css("left").replace("px",""));
},//相對於原始圖左邊的位置
GetCutTop:function(){
return this.DCutTop-parseInt(("#"+this.ContainerName+" .imgCut111").css("top").replace("px",""));
},//相對於原始圖頂邊的位置
GetImgWidth:function(){
return ("#"+this.ContainerName+" .imgCut111").get(0).offsetWidth;
},//原始圖當前的寬度
GetImgHeight:function(){
return ("#"+this.ContainerName+" .imgCut111").get(0).offsetHeight;
}//原始圖當前的高度

 

 

 

 

方法二：

如何?javascript jQuery外掛程式imgAreaSelect使用詳解

為了使使用者能自訂個人頭像，需要提供一個對上傳圖片的功能，當前很多網站特別是SNS類網站都提供這樣的功能，非常實用。主要實現的形式有兩種，一種是flash，另一種就是javascript，兩種方法各有鞦韆，關於Flash可以參考一下UcHome程式中頭像上傳功能，但這不是我要討論的話題，我這裡主要是如何?javascript，利用jQuery的imgAreaSelect外掛程式，輕鬆實現自訂頭像[avatar]javascript功能。

一，準備：
兩個JS檔案
1，jquery.js 下載：jquery.js
2，jquery.imgareaselect.js 下載：jquery.imgareaselect.js[imgareaselect-0.6.2.zip]

二，使用

function preview(img, selection){
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;

//動態小頭像 擷取當前選中框的寬度，高度，左邊框，右邊框
$('#biuuu + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}

//載入小頭像
$(document).ready(function () {
$('<div><img src="biuuu.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#biuuu'));
});

//初始化載入
$(window).load(function () {
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
三，調用

<div class="container">
<p>
<img id="biuuu" src="biuuu.jpg" title="biuuu" style="float: left; margin-right: 10px;" />
</p>
</div>
使用上面的javascript進行擴充可以實現很多的動態功能，jQuery提供的imgAreaSelect外掛程式調用非常簡單，其它相關應用可參考：imgAreaSelect Examples

使用jQuery外掛程式imgAreaSelect實現javascript還是非常簡單的，基本上就是一個動態映像顯示，擷取源圖片的位置和選取框的大小[寬度和高度]，輕鬆實現javascript功能。