js拖動圖片縮放裁剪頭像代碼



146 581 194



特效描述:拖動圖片縮放 裁剪頭像,有橫軸拖動的圖片裁剪,js頭像裁剪,裁剪頭像代碼

代碼結構

1. 引入JS

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

2. HTML代碼

<table width="100%" border="0">
  <tr>
    <td rowspan="2" valign="top">
<form name="setavatar" id="setavatar" action="setavatar.php?do=submit" method="post" onsubmit="return getcutpos();">
 <div id="cut_div" style="border:2px solid #888888; width:284px; height:266px; overflow: hidden; position:relative; top:0px; left:0px; margin:4px; cursor:pointer;">
 <table style="border-collapse: collapse; z-index: 10; filter: alpha(opacity=75); position: relative; left: 0px; top: 0px; width: 284px;  height: 266px; opacity: 0.75;" cellspacing="0" cellpadding="0" border="0" unselectable="on">
 <tr>
   <td style="background: #cccccc; height: 73px;" colspan="3"></td>
 </tr>
 <tr>
   <td style="background: #cccccc; width: 82px;"></td>
   <td style="border: 1px solid #ffffff; width: 120px; height: 120px;"></td>
   <td style="background: #cccccc; width: 82px;"></td>
 </tr>
 <tr>
   <td style="background: #cccccc; height: 73px;" colspan="3"></td>
 </tr>
 </table>
 <img id="cut_img" style="position:relative; top:-266px; left:0px" src="source.jpg" />
</div>
<table cellspacing="0" cellpadding="0">
  <tr>
    <td><img style="margin-top: 5px; cursor:pointer;"  src="images/_h.gif" alt="圖片縮小" onmouseover="this.src='images/_c.gif'" onmouseout="this.src='images/_h.gif'" onclick="imageresize(false)" /></td>
    <td><img id="img_track" style="width: 250px; height: 18px; margin-top: 5px" src="images/track.gif" /></td>
    <td><img style="margin-top: 5px; cursor:pointer;" src="images/+h.gif" alt="圖片放大"  onmouseover="this.src='images/+c.gif'" onmouseout="this.src='images/+h.gif'" onclick="imageresize(true)" /></td>
  </tr>
</table>
<img id="img_grip" style="position:absolute; z-index:100; left:-1000px; top:-1000px; cursor:pointer;" src="images/grip.gif" /> <div style="padding-top:15px; padding-left:5px;">
<input type="hidden" name="action" id="action" value="cutsave" />
<input type="hidden" name="cut_pos" id="cut_pos" value="" />
<input type="submit" class="button" name="submit"  id="submit" value=" 確認裁剪并提交 " />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="button" name="cancel"  id="cancel" value=" 取消 " onclick="javascript:history.back(1);"  />
</div>
</form>
	</td>
    <td>
	裁剪后圖片:<br />
	<img id="cutimg_l" src="l.jpg" border="1" /> <img id="cutimg_m" src="m.jpg" border="1" /> <img id="cutimg_s" src="s.jpg" border="1" />
	</td>
  </tr>
  <tr>
    <td>
	原始圖片:<br />
	<img src="source.jpg" border="1" />
	</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
	var cut_div;  //裁減圖片外框div
	var cut_img;  //裁減圖片
	var imgdefw;  //圖片默認寬度
	var imgdefh;  //圖片默認高度
	var offsetx = 82; //圖片位置位移x
	var offsety = -193; //圖片位置位移y
	var divx = 284; //外框寬度
	var divy = 266; //外框高度
	var cutx = 120;  //裁減寬度
	var cuty = 120;  //裁減高度
	var zoom = 1; //縮放比例
	var zmin = 0.1; //最小比例
	var zmax = 10; //最大比例
	var grip_pos = 5; //拖動塊位置0-最左 10 最右
	var img_grip; //拖動塊
	var img_track; //拖動條
	var grip_y; //拖動塊y值
	var grip_minx; //拖動塊x最小值
	var grip_maxx; //拖動塊x最大值
//圖片初始化
function imageinit(){
	cut_div = document.getElementById('cut_div');
	cut_img = document.getElementById('cut_img');
	imgdefw = cut_img.width;
	imgdefh = cut_img.height;
	if(imgdefw > divx){
		zoom = divx / imgdefw;
		cut_img.width = divx;
		cut_img.height = Math.round(imgdefh * zoom);
	}
	cut_img.style.left = Math.round((divx - cut_img.width) / 2);
	cut_img.style.top = Math.round((divy - cut_img.height) / 2) - divy;
	if(imgdefw > cutx){
		zmin = cutx / imgdefw;
	}else{
		zmin = 1;
	}
	zmax =  zmin > 0.25 ? 8.0: 4.0 / Math.sqrt(zmin);
	if(imgdefw > cutx){
		zmin = cutx / imgdefw;
		grip_pos = 5 * (Math.log(zoom * zmax) / Math.log(zmax));
	}else{
		zmin = 1;
		grip_pos = 5;
	}
	Drag.init(cut_div, cut_img);
	cut_img.onDrag = when_Drag;
}
//圖片逐步縮放
function imageresize(flag){
    if(flag){
		zoom = zoom * 1.5;
	}else{
		zoom = zoom / 1.5;
	}
	if(zoom < zmin) zoom = zmin;
	if(zoom > zmax) zoom = zmax;
	cut_img.width = Math.round(imgdefw * zoom);
	cut_img.height = Math.round(imgdefh * zoom);
	checkcutpos();
	grip_pos = 5 * (Math.log(zoom * zmax) / Math.log(zmax));
	img_grip.style.left = (grip_minx + (grip_pos / 10 * (grip_maxx - grip_minx))) + "px";
}
//獲得style里面定位
function getStylepos(e){  
	return {x:parseInt(e.style.left), y:parseInt(e.style.top)}; 
}
//獲得絕對定位
function getPosition(e){  
	var t=e.offsetTop;  
	var l=e.offsetLeft;  
	while(e=e.offsetParent){  
		t+=e.offsetTop;  
		l+=e.offsetLeft;  
	}
	return {x:l, y:t}; 
}
//檢查圖片位置
function checkcutpos(){
	var imgpos = getStylepos(cut_img);
	max_x = Math.max(offsetx, offsetx + cutx - cut_img.clientWidth);
	min_x = Math.min(offsetx + cutx - cut_img.clientWidth, offsetx);
	if(imgpos.x > max_x) cut_img.style.left = max_x + 'px';
	else if(imgpos.x < min_x) cut_img.style.left = min_x + 'px';
	max_y = Math.max(offsety, offsety + cuty - cut_img.clientHeight);
	min_y = Math.min(offsety + cuty - cut_img.clientHeight, offsety);
	if(imgpos.y > max_y) cut_img.style.top = max_y + 'px';
	else if(imgpos.y < min_y) cut_img.style.top = min_y + 'px';
}
//圖片拖動時觸發
function when_Drag(clientX , clientY){
	checkcutpos();
}
//獲得圖片裁減位置
function getcutpos(){
	var imgpos = getStylepos(cut_img);
	var x = offsetx - imgpos.x;
	var y = offsety - imgpos.y;
	var cut_pos = document.getElementById('cut_pos');
	cut_pos.value = x + ',' + y + ',' + cut_img.width + ',' + cut_img.height;
	return true;
}
//縮放條初始化
function gripinit(){
	img_grip = document.getElementById('img_grip');
	img_track = document.getElementById('img_track');
	track_pos = getPosition(img_track);
	grip_y = track_pos.y;
	grip_minx = track_pos.x + 4;
	grip_maxx = track_pos.x + img_track.clientWidth - img_grip.clientWidth - 5;
	img_grip.style.left = (grip_minx + (grip_pos / 10 * (grip_maxx - grip_minx))) + "px";
	img_grip.style.top = grip_y + "px";
	Drag.init(img_grip, img_grip);
	img_grip.onDrag = grip_Drag;
}
//縮放條拖動時觸發
function grip_Drag(clientX , clientY){
	var posx = clientX;
	img_grip.style.top = grip_y + "px";
	if(clientX < grip_minx){
		img_grip.style.left = grip_minx + "px";
		posx = grip_minx;
	}
	if(clientX > grip_maxx){
		img_grip.style.left = grip_maxx + "px";
		posx = grip_maxx;
	}
	grip_pos = (posx - grip_minx) * 10 / (grip_maxx - grip_minx);
	zoom = Math.pow(zmax, grip_pos / 5) / zmax;
	if(zoom < zmin) zoom = zmin;
	if(zoom > zmax) zoom = zmax;
	cut_img.width = Math.round(imgdefw * zoom);
	cut_img.height = Math.round(imgdefh * zoom);
	checkcutpos();
}
//頁面載入初始化
function avatarinit(){
	imageinit();
	gripinit();
	//刷新裁剪后的圖片
	document.getElementById('cutimg_l').src = document.getElementById('cutimg_l').src + '?' + (new   Date().getTime());
	document.getElementById('cutimg_m').src = document.getElementById('cutimg_m').src + '?' + (new   Date().getTime());
	document.getElementById('cutimg_s').src = document.getElementById('cutimg_s').src + '?' + (new   Date().getTime());
}
if (document.all){
	window.attachEvent('onload',avatarinit);
}else{
	window.addEventListener('load',avatarinit,false);
} 
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 表單提交
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表