jQuery 实现图片剪切（裁剪）效果（慕课网：用JavaScript实现图片剪切（裁剪）效果）

最新推荐文章于 2026-04-17 09:08:01 发布

原创

最新推荐文章于 2026-04-17 09:08:01 发布 · 置顶 · 4.5k 阅读

收录于

该博客详细介绍了如何利用jQuery库实现图片剪切（裁剪）的效果，内容包括设置裁剪区域、获取裁剪坐标、展示裁剪后的图片等关键步骤，适合前端开发者学习JavaScript图片处理技术。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.img-1,
			.img-2 {
				border: 0px;
				display: block;
				position: absolute;
				z-index: 1;
			}
			
			.img-1 {
				opacity: 0.3;
			}
			
			.img-2 {
				clip: rect(0px, 200px, 200px, 0px);
			}
			
			body {
				background: #333;
			}
			
			#main {
				position: relative;
				top: 100px;
				left: 200px;
				width: 460px;
				height: 360px;
			}
			
			.move {
				border: 1px solid #fff;
				z-index: 2;
				position: absolute;
				width: 200px;
				height: 200px;
				cursor: move;
			}
			
			.minDiv {
				width: 8px;
				height: 8px;
				background: #fff;
				position: absolute;
			}
			
			.minDiv.left-up {
				top: -4px;
				left: -4px;
				cursor: nw-resize;
			}
			
			.minDiv.left {
				top: 50%;
				left: -4px;
				margin-top: -4px;
				cursor: w-resize;
			}
			
			.minDiv.left-down {
				bottom: -4px;
				left: -4px;
				cursor: sw-resize;
			}
			
			.minDiv.top {
				left: 50%;
				margin-left: -4px;
				cursor: n-resize;
				top: -4px;
			}
			
			.minDiv.right-up {
				right: -4px;
				curs