jQuery插件imgAreaSelect（图片区域选择显示）

最新推荐文章于 2018-01-05 16:45:31 发布

motian06

最新推荐文章于 2018-01-05 16:45:31 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/motian06/article/details/8017589

js 专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了jQuery插件imgAreaSelect的使用方法，主要用于实现图片的区域选择功能。通过示例图片和详细代码展示如何在网页中集成并应用此插件，帮助开发者实现用户交互的图片裁剪或选取需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件imgAreaSelect 作用是图片区域选择显示

先上图片

再上代码

<!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">
<!--[if IE 6]><link href="http://local.static.tradecv.com/styles/common/ie6.css?version=20120912" media="screen" rel="stylesheet" type="text/css" ><![endif]-->
<!--[if IE 7]><link href="http://local.static.tradecv.com/styles/common/ie7.css?version=20120912" media="screen" rel="stylesheet" type="text/css" ><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="http://local.static.tradecv.com/scripts/common/html5.js?version=20120912"></script><![endif]-->
<link href="http://local.static.tradecv.com/styles/common/global.css?version=20120912" media="screen" rel="stylesheet" type="text/css" >
<link href="http://local.static.tradecv.com/styles/profile/default.css?version=20120912" media="screen" rel="stylesheet" type="text/css" >

<link href="http://local.static.tradecv.com/scripts/jquery_imgareaselect/css/imgareaselect-default.css?version=20120912" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://local.static.tradecv.com/scripts/common/jquery.js?version=20120912"></script>
<script type="text/javascript" src="http://local.static.tradecv.com/scripts/jquery_imgareaselect/scripts/jquery.imgareaselect.pack.js?version=20120912"></script>
</head>
<body>
<style>
div.preview_div{overflow:hidden;margin:auto;}
div.p_photo_l{width:202px;height:152px;}
div.p_photo_m{width:52px;height:52px;}
div.p_photo_s{width:32px;height:32px;}
</style>
<!--主体内容开始-->
<article class="w">
	<div class="mtb15px clearfix">
		<aside class="preview">
			<figure>
				<div class='preview_div p_photo_l'><img src="http://local.www.tradecv.com/portraits/000/000/281/9be2fcd047/image.jpg" class="nophoto_l"/></div>
				<figcaption>请注意中小尺寸头像是否清晰</figcaption>
			</figure>
			<figure>
				<div class='preview_div p_photo_m'><img src="http://local.www.tradecv.com/portraits/000/000/281/9be2fcd047/image.jpg" class="nophoto_m"/></div>
				<figcaption>中尺寸头像（50×50像素）<br />（自动生成）</figcaption>
			</figure>
			<figure>
				<div class='preview_div p_photo_s'><img src="http://local.www.tradecv.com/portraits/000/000/281/9be2fcd047/image.jpg" class="nophoto_s"/></div>
				<figcaption>小尺寸头像（30×30像素）<br />（自动生成）</figcaption>
			</figure>
		</aside>
		<section class="upload">
            <fieldset>
                <legend>
                    <h3>选择头像区域 <span class="pl20px">请使用鼠标左键拖动的选择框，选择你想要的理想区域。</span></h3>
                </legend>
				<img id='img_origin' src="http://local.www.tradecv.com/portraits/000/000/281/9be2fcd047/image.jpg"/>
			</fieldset>
            <form id='coordinates_form' action="/profile/upload-photo/save" method="post">
                <input type='hidden' name='x' class='x' value='0'/>
                <input type='hidden' name='y' class='y' value='0'/>
                <input type='hidden' name='w' class='w' value='282'/>
                <input type='hidden' name='h' class='h' value='211'/>
            </form>
	</div>
</article>
<!--主体内容结束-->
<script>
$(document).ready(function(){
	//构造imgAreaSelectApi
	imgAreaSelectApi = $('#img_origin').imgAreaSelect({
		persistent : true,	// true，选区以外点击不会启用一个新选区（只能移动/调整现有选区）
		instance : true,	// true，返回一个imgAreaSelect绑定到的图像的实例，可以使用api方法
		onSelectChange : preview,	// 改变选区时的回调函数
		show : true,	// 选区会显示
		handles : true,	// true，调整手柄则会显示在选择区域内
		resizable : true,	// true， 选区面积可调整大小
		minWidth : Math.floor(400/4),	// 选取的最小宽度
		minHeight : Math.floor(300/4),	// 选取的最小高度
		aspectRatio : '400:300'	// 选区的显示比率 400:300
	});
	
	//加载时触发的默认选区
	$('#img_origin').load(function(){
		var form = $('#coordinates_form');
		
		//获取 x、y、w、h的值
		var left = parseInt(form.children('.x').val());	
		var top = parseInt(form.children('.y').val());
		var width = parseInt(form.children('.w').val());
		var height = parseInt(form.children('.h').val());
		
		//imgAreaSelectApi 就是图像img_origin的实例 上边instance已解释
		//setSelection(),设置选区的坐标
		//update(),更新
		imgAreaSelectApi.setSelection(left, top, left+width, top+height);
		imgAreaSelectApi.update();
	});
	
	//preview方法 img图片参数，selection选区参数
	function preview(img, selection){
		$('div.preview_div img').attr('src',"http://local.www.tradecv.com/portraits/000/000/281/9be2fcd047/image.jpg");
		
		var form = $('#coordinates_form');
		
		//重新设置x、y、w、h的值
		form.children('.x').val(selection.x1);
		form.children('.y').val(selection.y1);
		form.children('.w').val(selection.x2-selection.x1);
		form.children('.h').val(selection.y2-selection.y1);
		
		//preview_photo() 左一的图片调整（与选区的图片显示一致）
		preview_photo('p_photo_l', selection);
		//preview_icon() 左二，左三的图片调整
		//（与选区的图片显示一致，为何不用preview_photo()方法呢，因为左一的是长方形，左二左三是正方形）
		preview_icon('p_photo_m', selection);
		preview_icon('p_photo_s', selection);
	}
	
	//preview_photo()方法 左一的图片调整（与选区的图片显示一致）
	//div_class是对应div的class
	function preview_photo(div_class, selection){
		var div = $('div.'+div_class);
		
		//获取div的宽度与高度
		var width = div.outerWidth();
		var height = div.outerHeight();
		
		//显示区域与选区图片比例 宽度之比，高度之比
		//获取比例的用处是：
		//当选区的图片大于显示区域时，要相应的缩写图片。
		//当选区的图片小于显示区域时，要相应的放大图片。
		//selection的宽高之比是4:3,div的宽高之比也是4:3 
		//scaleX scaleY之比为1:1
		var scaleX = width/selection.width;
		var scaleY = height/selection.height;
		
		//css 控制图片的缩放以及偏移量
		//width height 控制img区域的大小，如果只做他俩的限定可以实现图片的缩放
		//但是有一点缺陷，width height大于div的outerWidth outerHeight时，图片显示不完全
		//由此我们要引入偏移量 marginLeft marginTop 显示出来的就是局部缩放
		div.find('img').css({
			width : Math.round(scaleX * $('#img_origin').outerWidth())+'px',
			height : Math.round(scaleY * $('#img_origin').outerHeight())+'px',
			marginLeft : '-'+Math.round(scaleX * selection.x1)+'px',
			marginTop : '-'+Math.round(scaleY * selection.y1)+'px'
		});		
	}
	
	//preview_icon()方法 左二左三的图片调整 和preview_photo()相似 （我们这里要求的缩放的宽高之比1:1不是4:3）
	function preview_icon(div_class, selection){
		var div = $('div.'+div_class);
		
		//获取div的宽度与高度 因为这里div的宽度和高度相同
		var height = div.outerWidth();
		
		//获取显示区域与选区图片比例 
		//这里因为显示区域的宽度和高度相同
		//根据显示区域与选区图片的 宽高之比是否一致。一致才能实现等比例缩放如上边的就是4:3与4:3
		//不能各取显示区域与选区图片 宽度之比 高度之比
		//这里我们取 高度之比，此值相度 宽度之比大
		var scaleY = height/selection.height;
		
		//css 控制图片的缩放以及偏移量
		//这里左边偏移量舍弃了一部分(selection.width - selection.height)/2
		div.find('img').css({
			width : Math.round(scaleY * $('#img_origin').outerWidth())+'px',
			height : Math.round(scaleY * $('#img_origin').outerHeight())+'px',
			marginLeft : '-'+Math.round(scaleY * (selection.x1 + (selection.width - selection.height)/2))+'px',
			marginTop : '-'+Math.round(scaleY * selection.y1)+'px'
		});		
	}
	
});
</script>	
</body>
</html>

代码都已经写好注释。