原文:http://www.js-css.cn/a/jscode/cutpic/2013/1102/1013.html
非常不错的jQuery图片裁剪插件CropZoom,功能非常强大,可以旋转图片,改变图片显示比例,
拖拽到指定区域进行裁剪,裁剪及时显示裁剪图片效果,绝对能满足你的需求,很适合头像图片
裁剪方面的应用。
兼容性:
兼容IE6+,fireFox2+,Opera,Safria,Chrome
调用方法:
1.加载jQuery.js,ajaxfileupload.js
2.调用函数:
<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
.crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}
#cropzoom_container{float:left; width:500px}
#preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}
.page_btn{float:right; width:150px; margin-top:20px; line-height:30px; text-align:center}
.clear{clear:both}
.btn{cursor:pointer}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>
<div class="crop">
<div id="cropzoom_container"></div>
<div id="preview"><img id="generated" src="tmp/head.gif" /></div>
<div class="page_btn">
<input type="button" class="btn" id="crop" value="剪切照片" />
<input type="button" class="btn" id="restore" value="照片复位" />
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(function() {
var cropzoom = $('#cropzoom_container').cropzoom({
width: 500,//DIV层宽度
height: 360,//DIV层高度
bgColor: '#ccc',//DIV层背景颜色
enableRotation: true,//是否允许旋转图片true false
enableZoom: true,//是否允许放大缩小
selector: {
w:150,//选择器宽度
h:200,//旋转高度
showPositionsOnDrag:true,//是否显示拖拽的位置洗洗脑
showDimetionsOnDrag:false,
centered: true,//居中
bgInfoLayer:'#fff',
borderColor: 'blue',//选择区域边框样式
animated: false,
maxWidth:150,//最大宽度
maxHeight:200,//最大高度
borderColorHover: 'yellow'//鼠标放到选择器的边框颜色
},
image: {
source: 'http://www.js-css.cn/jscode/focus/focus19/images/b2.jpg',
width: 450,//图片宽度
height: 300,//图片高度
minZoom: 30,//最小放大比例
maxZoom: 150//最大放大比例
}
});
$("#crop").click(function(){//裁剪提交
cropzoom.send('resize_and_crop.php', 'POST', {}, function(imgRet) {
$("#generated").attr("src", imgRet);
});
});
$("#restore").click(function(){//显示初始状态照片
$("#generated").attr("src", "tmp/head.gif");
cropzoom.restore();
});
});
</script>