JavaScript图片裁剪

最新推荐文章于 2025-07-15 13:37:37 发布

u012888365

最新推荐文章于 2025-07-15 13:37:37 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： javascript Javascript图片裁剪图片裁剪 imgareaselect

本文链接：https://blog.youkuaiyun.com/gzu_imis/article/details/37960611

Web 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用jQuery插件imgareaselect进行图片裁剪，包括库的选择、综合演示效果、二次封装与实现的详细步骤，以及代码下载链接。重点在于根据图片原始比例展示和裁剪预览的高宽比保持一致，确保良好的用户体验。

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

1.jquery 图片裁剪库选择

Jcrop：http://deepliquid.com/content/Jcrop.html

imgareaselect：http://odyniec.net/projects/imgareaselect/

CropZoom：https://github.com/cropzoom/cropzoom

可供选择的jQuery插件非常多，这里选择 imgareaselect 进行详细演示

2.综合演示效果

2.1 左侧区域是 div + img 标签，用来展示原图，具体需求

（1）左侧展示用户上载的原图，原图可以超大，可以超小。大图就等比例压缩展示，小图不压缩

（2）左侧区域最大宽度是 608px，这个参数要求可以定制！

（3）左侧裁剪，要求按照【右侧预览区域的高宽比】进行裁剪

2.2 右侧区域也是 div + img 标签，用来展示【裁剪部分】的预览图

（1）预览区域的高宽是 608*304 ，要求可以定制

（2）左侧裁剪部分的图在这里全屏体现出来

这样的要求其实是从用户体验出发的，保证了效果：

（1）原图不管多大多小，都会按照原图比例展示出来

（2）左侧区域最大宽度固定，这样左侧不会过宽，【导致右侧预览没地方】

但是要注意，如果用户上载很小的图，并且【裁剪的部分】本身就小于【预览的高宽】

那么会等比例拉伸展示，其实可以做到不拉伸，但是这样的话就影响了整体页面布局！

上述参数指标应该说非常详细了，提供了原图、左侧展示图、裁剪区、右侧预览图的指标

并且根据【左侧展示图】+【原图】+【裁剪区坐标】计算出来在原图上裁剪点坐标

这样方便后台对原图进行真实裁剪！

3、二次封装与实现

（1）支持计算各种坐标的回调函数

（2）支持左侧、右侧各种指标的定制

（3）支持图片加载完成才开始出现效果

防止用户上载超大图，图片还没加载完成就调用imgAreaSelect的方法，导致在某些浏览器里面没有效果

官方提供的简单示例，在遇到上载超大图，比如10M图片时，其实都有问题。

先来看看html代码，非常简单

	<input type="button" value="上载" onclick="testUpload()" /> <br/>
	
	X1:<input id="X1" type="text" />
	Y1:<input id="Y1" type="text" /><br/>
	
	X2:<input id="X2" type="text" />
	Y2:<input id="Y2" type="text" /><br/>
	
	裁剪区宽度:<input id="aWidth" type="text" />
	裁剪区高度:<input id="aHeight" type="text" /> <br/>
	
	真实宽度:<input id="rWidth" type="text" />
	真实高度:<input id="rHeight" type="text" /> <br/>
	
	展示宽度:<input id="sWidth" type="text" />
	展示高度:<input id="sHeight" type="text" /> <br/>
	
	预览宽度:<input id="pWidth" type="text" />
	预览高度:<input id="pHeight" type="text" /> <br/>
	
	<h3>根据[真实高宽+展示高宽+裁剪区坐标]计算出来在真实图片上应该裁剪的坐标</h3>
	Real-X1:<input id="rX1" type="text" />
	Real-Y1:<input id="rY1" type="text" /><br/>
	
	Real-X2:<input id="rX2" type="text" />
	Real-Y2:<input id="rY2" type="text" /><br/>
	
</div>

<!-- 左侧区域：用来按照原图比例展示用户上载的图片
	 因为要保证左侧区域最大宽度不超过 608，所以这里width要设置！
	 如果你的需求不同，就自己定义一个宽度。
	 高度不需要设置，如果原图超大，宽度就按照 608展示，而高度就是等比例压缩的，不能确定高度！
	 如果图片本身还不到 608 宽度，那么就会按照原图展示出来
-->
<div id="leftDiv" style="float:left;width:608px;height:auto;border:1px solid #CCC;overflow:hidden;">
	<img src="">
</div>

<!-- 右侧区域：用来展示左侧裁剪的部分，div的高宽就必须定义好
	比如这里要求按照 608*304规格展示，那么就必须设置好。其他样式随便你自己定义！
	注意div里面可以不放 img 标签
 -->
<div id="previewDiv" style="width: 608px; height:304px;float:left;
		margin-left:10px; overflow: hidden; border:1px dotted #ccc">
</div>

再来看看如何调用

<title>图片裁剪</title>
	<link rel="stylesheet" type="text/css" href="<%=context%>/staticfile/imgselect/css/imgareaselect-default.css" />
	<script type="text/javascript" src="<%=context%>/staticfile/imgselect/scripts/jquery.min.js"></script>
	<script type="text/javascript" src="<%=context%>/staticfile/imgselect/scripts/jquery.imgareaselect.pack.js"></script>
	<script type="text/javascript" src="<%=context%>/staticfile/imgSelectedArea.js"></script>
</head>
<script type="text/javascript">
	function testUpload(){
		var left = $("#leftDiv");
		var right = $("#previewDiv");
		var imgSrc="http://pan.suning.com/cloud-web/index/images/intro/intro-01.jpg";
		//var imgSrc="staticfile/img/DSC02417.JPG";
		//var imgSrc="staticfile/img/2.jpg";
		// var imgSrc="staticfile/img/1.jpg";
		var preWidth = 608;
		var preHeight = 304;
		
		$("#pWidth").val(preWidth);
		$("#pHeight").val(preHeight);
		
		var initObject = {
			leftDiv:left,
			rightDiv:right,
			imgSrc:imgSrc,
			preWidth:preWidth,
			preHeight:preHeight
		};
		
		// 回调函数(可选)
		var getImgInfo = function(imgInfo){
			$("#rWidth").val(imgInfo.realWidth);
			$("#rHeight").val(imgInfo.realHeight);
			$("#sWidth").val(imgInfo.showWidth);
			$("#sHeight").val(imgInfo.showHeight);
		}
		
		// 回调函数(可选)
		var getAreaInfo = function(areaInfo){
			$("#X1").val(areaInfo.x1);
			$("#Y1").val(areaInfo.y1);
			$("#X2").val(areaInfo.x2);
			$("#Y2").val(areaInfo.y2);
			$("#aWidth").val(areaInfo.width);
			$("#aHeight").val(areaInfo.height);
			
			$("#rX1").val(areaInfo.rX1);
			$("#rY1").val(areaInfo.rY1);
			$("#rX2").val(areaInfo.rX2);
			$("#rY2").val(areaInfo.rY2);
			
		}
		
		initObject.getImgInfo = getImgInfo;
		initObject.getAreaInfo = getAreaInfo;
		
		initImgSelectedArea(initObject);
	}
	
</script>

注意到：调用 initImgSelectedArea 方法即可，传一个json对象。要求位json对象提供几个参数和回调函数，其中回调函数是可选的！
这个方法就是在 imgSelectedArea.js 定义的

最后来看看imgSelectedArea.js文件

/**
 * 图片裁剪
 * 
 * @param initObj{
 * 		leftDiv:左侧div容器
 * 		rightDiv：右侧div容器
 * 		imgSrc：原图的地址
 * 		preWidth：右侧预览图要求的宽度
 * 		preHeight：右侧预览图要求的高度
 * 		getImgInfo：返回原图、左侧最终展示图的高宽的回调函数
 * 		getAreaInfo：返回左侧裁剪区域坐标、高宽，以及映射到原图上的坐标
 * }
 * @returns {succeed:(true|false),msg:'处理结果'}
 * 
 * @author yli
 */
function initImgSelectedArea(initObj) {
	if (initObj) {
		var leftDiv = initObj.leftDiv || undefined;
		var rightDiv = initObj.rightDiv || undefined;
		var imgSrc = initObj.imgSrc || undefined;
		var preWidth = initObj.preWidth || 100;
		var preHeight = initObj.preHeight || 100;
		if(!leftDiv || !rightDiv || !imgSrc) {
			return {
				succeed : false,
				msg : '参数initObj属性{leftDiv,rightDiv,imgSrc}未定义!'
			};
		}
		
		// 获取左侧区域中img标签
		var leftImg = leftDiv.find("img");
		// 绑定img.onload事件,确保图片加载完成才初始化裁剪区域
 		leftImg.load(function(){
 			// 图片真实的宽度和高度
			var realWidth = $(this).width();
			var realHeight = $(this).height();
			
			// 左侧区域要求将原图全部展示出来,不管原图多大多小
			// 由于左侧区域div宽度受preWidth限制,因此对于超宽图片要等比例压缩
			if(realWidth>preWidth) {
				$(this).css({
					width:preWidth,
					height:(preWidth*realHeight)/realWidth
				});
			}
			
			// 左侧区域属性设置完成,才显示图片
			$(this).css({display:'block'});
			
			// 预加载右侧区域图片,处于隐藏状态
			// 裁剪左侧区域图片才显示右侧预览图
			if(rightDiv.find("img").size()==0){
				rightDiv.append('<img style="position:relative;display:none" src="'+imgSrc+'" />');
			}else {
				rightDiv.find("img").css({display:'none'}).attr("src",imgSrc);
			}
			
			// 左边区域原图可能被等比例压缩展示展示(见上一步)
			// 而裁剪区是基于展示区域的高宽,因此获取展示图的高宽
			var showWidth = $(this).width();
			var showHeight = $(this).height();
			
			// 左侧区域图片裁剪触发调用的函数
			var selectedChange = function(img, selection){
				// 此处使用预览区域大小计算比例
				var scaleX = preWidth / (selection.width || 1);
			    var scaleY = preHeight / (selection.height || 1);
			    
			    $("#sX").val(showWidth + '--->' + preWidth);
			    $("#sY").val(showHeight + '--->' + preHeight);
			    
			    // 这里依据左侧图片大小计算
			    rightDiv.find("img").css({
			    	display:'block',
			        width: Math.round(scaleX * showWidth) + 'px',
			        height: Math.round(scaleY * showHeight) + 'px',
			        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
			    });
			    
			    // 调用回调函数,返回裁剪区域信息
			    if(initObj.getAreaInfo){
					initObj.getAreaInfo({
						x1:selection.x1,	//裁剪区域左上角x1
						y1:selection.y1,	//裁剪区域左上角y1
						x2:selection.x2,	//裁剪区域右下角x2
						y2:selection.y2,	//裁剪区域右下角x2
						width:selection.width,		//裁剪区域宽度
						height:selection.height,	//裁剪区域高度
						rX1:Math.round(realWidth*selection.x1/showWidth),	//裁剪点映射到真实原图上的坐标
						rY1:Math.round(realHeight*selection.y1/showHeight),	
						rX2:Math.round(realWidth*selection.x2/showWidth),
						rY2:Math.round(realHeight*selection.y2/showHeight)	
					});
			    }
			};
			
			// 按照预览图的比例初始化裁剪区域,并按照左侧可能最大展示区域初始化最大裁剪区域
			var previewRatio = preWidth+':'+preHeight;
			leftImg.imgAreaSelect({ 
				aspectRatio: previewRatio,
				handles: true, 
				maxWidth:showWidth,
				maxHeight:showHeight,
				onSelectChange: selectedChange
			});
			
			// 调用回调函数,返回图片信息
			if(initObj.getImgInfo){
				initObj.getImgInfo({
					realWidth:realWidth,	//图片真实宽度
					realHeight:realHeight,	//图片真实高度
					showWidth:showWidth,	//展示宽度
					showHeight:showHeight	//展示高度
				});
			}
			
 		});
 		
 		// 加载左侧区域Img,初始化隐藏
 		leftImg.css({display:'none'}).attr("src", imgSrc);
		
	} else {
		return {
			succeed : false,
			msg : '方法入参initObj未定义!'
		};
	}
}