`
mengnanleo
  • 浏览: 5924 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

JS简易图片裁剪-单点移动带缩略图

    博客分类：
  • JS
jsphp图片裁剪缩略图 
阅读更多

比较上一个版本多了缩略效果，但是切割图的地方还没有做大小缩放功能，等有时间做出来了继续更新，谢谢大家捧场哈

 

老规矩，先上html代码(没有对图片大小边界做判断，只对容器做了判断，请注意~ )

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
.imageCut{width:524px; background:#f1f7fb; padding:20px;}
#picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}
#picDiv img{position:absolute; top:0px; left:0px;}
#picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}
#picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}
#picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}
#picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}
form{clear:both; text-align:right;}
</style>
</head>

<body>
<div class="imageCut">
    <div id="picDiv">
        <img src="../../images/2.jpg" />
    </div>
    <div id="picSeeSmall"></div>
    <div id="picSeeBig"></div>
    <form action="cutPic.php" method="post">
        <input type="submit" value=" 提 交 " />
        <input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
        <input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />
    </form>
</div>
<script type="text/javascript">
(function(){
	window.onload=cutImage;
	function cutImage(){
		var pDiv=document.getElementById('picDiv');
		pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;
		var pDivImg=pDiv.getElementsByTagName('img')[0],
			clip=pDiv.getElementsByTagName('img')[1],
			pCut=document.getElementById('picCut'),
			pChange=document.getElementById('picCutChange');
			pSeeS=document.getElementById('picSeeSmall'),
			pSee=document.getElementById('picSeeBig'),
			pDivW=pDiv.offsetWidth-2,
			pDivH=pDiv.offsetHeight-2,
			opacity=function(obj,v){
				if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};
				obj.style.MozOpacity=v/100;
				obj.style.opacity=v/100;
			},
			see=function(){
				var getPos={
					't':pCut.offsetTop,
					"l":pCut.offsetLeft,
					'w':pCut.offsetWidth,
					'h':pCut.offsetHeight,
					'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),
					'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)
				};
				init(getPos);
				seePic(pSee,getPos);
				seePic(pSeeS,getPos);
				window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
			},
			init=function(getPos){
				var t=getPos.t*getPos.kh,
					l=getPos.l*getPos.kw;
				if(!clip){
					clip=document.createElement('img');
					clip.src=pDivImg.src;
					pDiv.appendChild(clip);
				}
				pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';
				clip.style.cssText='top:-'+t+'px; left:-'+l+'px';
	
				clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)';
				opacity(pDivImg,50);			
			},
			seePic=function(obj,getPos){
				var img=obj.getElementsByTagName('img')[0],
					k=obj.offsetWidth/getPos.w;
					t=getPos.t*getPos.kh+getPos.t,
					l=getPos.l*getPos.kw+getPos.l;
				if(!img){
					img=document.createElement('img');
					img.src=pDivImg.src;
					obj.appendChild(img);
				}
				img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;';
				document.getElementById(obj.id+'Infor').value="{'x':'"+l+"','y':'"+t+"','w':'"+getPos.w+"','h':'"+getPos.h+"','k':'"+k+"','nw':'"+(obj.offsetWidth-2)+"','nh':'"+(obj.offsetHeight-2)+"','url':'"+pDivImg.src+"'}";
			},
			clear=function(o){
				if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
				document.onmouseup=function(){
					if(!-[1,]){o.releaseCapture();}
					document.onmousemove=null;
					document.onmouseup=null;
				};
				return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
			};
		if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了
			var cDiv=document.createElement('div');
			cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
			pCut.appendChild(cDiv);
		}
		pCut.onmousedown=function(e){
			e=e||window.event;
			var oldX=e.clientX-pCut.offsetLeft,
				oldY=e.clientY-pCut.offsetTop,
				maxW=pDivW-pCut.offsetWidth,
				maxH=pDivH-pCut.offsetHeight;
			document.onmousemove=function(e){
				e=e||window.event;
				var newX=e.clientX-oldX,newY=e.clientY-oldY;
				newX=newX<0?0:newX>maxW?maxW:newX;
				newY=newY<0?0:newY>maxH?maxH:newY;
				pCut.style.top=newY+'px';
				pCut.style.left=newX+'px';
				see();
			};
			clear(this);
		};
		pChange.onmousedown=function(e){
			e=e||window.event;
			var oldX=e.clientX,
				oldY=e.clientY,
				oldT=pCut.offsetTop+2,
				oldL=pCut.offsetLeft+2,
				oldW=pCut.offsetWidth,
				oldH=pCut.offsetHeight,
				minW=50,minH=50;
			if(e.stopPropagation){
				e.stopPropagation();
			}else{
				e.cancelBubble=true;
			}
			document.onmousemove=function(e){
				e=e||window.event;
				var w=e.clientX-oldX+oldW;
				w=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;
				h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;
				w=w!=h?h:w;
				pCut.style.width=w+'px';
				pCut.style.height=h+'px';
				if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
				see();
			};
			clear(this);
		};
		see();
	}
})();
</script>
</body>
</html>
 

 

继续php代码

 

<?php
$time=time();
cutPic('Small',$time);
cutPic('Big',$time);

function cutPic($nam,$time){
	$img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true);
	$old_img=imagecreatefromstring(file_get_contents($img['url']));
	$new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg';
	if(function_exists("imagecreatetruecolor")){
	  $new_img=imagecreatetruecolor($img['nw'],$img['nh']);
	}else{
	  $new_img=imagecreate($img['nw'],$img['nh']);
	}
	imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']);
	imagejpeg($new_img,$new_url);
	imagedestroy($new_img);
	echo '<img src="'.$new_url.'" /><br /><br /><br />';
}
function getip(){
	if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
		$ip = getenv("HTTP_CLIENT_IP");
	}else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
		$ip = getenv("HTTP_X_FORWARDED_FOR");
	}else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
		$ip = getenv("REMOTE_ADDR");
	}else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
		$ip = $_SERVER['REMOTE_ADDR'];
	}else{
		$ip = "unknown";
	}
	return ($ip);
}
?>
 

 

继续附件上传，共勉共勉。。。

分享到：
| JS简易图片裁剪-多点移动
评论
2 楼 mengnanleo 2012-02-07  
话说自己写着玩呢~能提高技术么~最近太忙了~完全没有时间更新
1 楼 rensanning 2012-01-31  
试试jsCropperUI吧.

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS简易图片裁剪-多点移动

    【标题】"JS简易图片裁剪-多点移动"是一个关于使用JavaScript实现图像裁剪功能的教程，尤其强调了在裁剪过程中支持多点移动，这通常涉及到图像处理和前端开发的技术。在这个项目中，开发者可能需要理解JavaScript的...

    安卓app开发项目-实现获取视频的缩略图（ThumbnailUtils），并且播放(源码).zip

    安卓app开发项目-实现获取视频的缩略图（ThumbnailUtils），并且播放(源码).zip安卓app开发项目-实现获取视频的缩略图（ThumbnailUtils），并且播放(源码).zip安卓app开发项目-实现获取视频的缩略图（ThumbnailUtils...

    Js实现图片幻灯切换效果-带缩略图.rar

    这个"Js实现图片幻灯切换效果-带缩略图.rar"压缩包文件提供了一个使用JavaScript实现的图片幻灯片功能，同时带有缩略图和动画效果。这种效果常用于网站的首页展示、产品展示或者新闻滚动等场景，能够使内容更生动，...

    js实现带缩略图的图片切换效果（有控制按钮）

    在JavaScript编程中，实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求，尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验，让他们更轻松地浏览一组图片。以下是对这个...

    附带缩略图的JS图片轮换

    "附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案，它不仅提供了主图片的轮换，还带有缩略图导航，让用户能够直观地看到所有可切换的图片，并手动选择查看。这种功能常用于网站的幻灯片展示、...

    带缩略图及描述的js+css图片轮播

    它结合了JavaScript（js）和CSS（层叠样式表）技术，使得图片能够以吸引人的方式自动或手动进行切换，并且带有缩略图导航，用户可以方便地浏览全部图片。 【描述】提到的效果是网页设计中的一个经典元素，简洁大方...

    图片裁剪自动生成缩略图

    "图片裁剪自动生成缩略图"这个话题涉及到的是如何使用JavaScript库，特别是JQuery框架，来实现图片的裁剪功能，并自动创建适合展示的缩略图。接下来，我们将详细探讨这一过程中的关键技术点。 首先，JQuery是一个...

    多图附缩略图焦点图广告,可左右移动按钮

    这个功能的核心在于JavaScript（JS）的实现，因为JavaScript是网页动态交互的主要工具，它可以控制图片的切换效果、缩略图的响应以及左右移动按钮的功能。标签“多图”、“缩略图”、“焦点图”、“JS”都指向了这一...

    多图片上传-判断图片像素-生成缩略图

    在IT领域，多图片上传、判断图片像素以及生成缩略图是常见的图像处理技术，尤其在网站开发和移动应用设计中极为重要。这些功能能够优化用户体验，减少服务器存储空间，并加速网页加载速度。下面我们将详细探讨这三个...

    js带缩略图的焦点图

    综上所述，js带缩略图的焦点图是一个结合了JavaScript、DOM操作、事件处理、图片适配和动画效果的复杂但实用的网页组件。它为用户提供了一种优雅的方式去展示和浏览多张图片，提升了网页的互动性和视觉吸引力。

    ASP.Net常用功能整理--生成图片的缩略图

    在ASP.NET开发中，生成图片的缩略图是一项常见的需求，尤其在网站中展示大量图片时，为了提高页面加载速度和用户体验，通常需要对原始图片进行尺寸调整，生成适合网页显示的缩略图。本教程将详细介绍如何在ASP.NET...

    无刷新上传--可生成缩略图--demo.zip

    这段代码可能会在处理上传后的回调函数中执行，确保每个上传的图片都能快速生成相应的缩略图。 总的来说，这个DEMO提供了一个完整的解决方案，涵盖了从用户交互到后端处理的整个无刷新上传流程，以及图片处理的相关...

    Android-实现获取视频的缩略图（ThumbnailUtils），并且播放.zip

    Android-实现获取视频的缩略图（ThumbnailUtils），并且播放.zip Android-实现获取视频的缩略图（ThumbnailUtils），并且播放.zip Android-实现获取视频的缩略图（ThumbnailUtils），并且播放.zip Android-实现获取...

    纯js带缩略图的图片图集幻灯片特效

    【标题】"纯js带缩略图的图片图集幻灯片特效"涉及的核心知识点主要集中在JavaScript编程语言、图片处理和用户体验设计上。这个项目旨在创建一个无依赖（不使用jQuery或其他库）的图片轮播功能，同时带有缩略图导航，...

    带缩略图轮播效果（全屏切换）

    "带缩略图轮播效果（全屏切换）"是一种常见的网页组件，它允许用户通过点击缩略图或者使用导航箭头来浏览一系列全屏展示的图片或内容。这种功能常用于产品展示、图片画廊、幻灯片等场景，给用户带来更直观、更丰富的...

    带缩略图的JS图片轮换.rar

    【标题】"带缩略图的JS图片轮换.rar"是一个包含JavaScript实现的图片轮换功能，具有缩略图导航的代码资源。这种技术在网页设计中非常常见，用于创建吸引人的动态图像展示，比如相册或产品展示。 【描述】"带缩略图...

    原生js图片淡出淡进底部带缩略图的图片切换代码

    在本文中，我们将深入探讨如何使用原生JavaScript实现一个具有图片淡入淡出效果和底部缩略图导航的图片切换功能。这个功能广泛应用于网页设计，可以为用户提供更丰富的交互体验，尤其适用于产品展示或者相册浏览等...

    JS带缩略图和箭头的焦点图代码

    【JS带缩略图和箭头的焦点图代码】是一种常见的网页动态效果，它用于展示一组图片，并通过缩略图导航和箭头控制来切换主图。这种效果在网站的首页、产品展示、图片画廊等场景中非常常见，能够提升用户体验，使用户更...

    JS带缩略图图片轮番效果

    带缩略图的JS图片轮番效果，很漂亮！分享一下。 带缩略图的JS图片轮番效果，很漂亮！分享一下。

Magicbox
Global site tag (gtag.js) - Google Analytics