<!DOCTYPE html>
<html lang="en">
<head>
<title>API Demo | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script>
$(function () {
var jcrop_api;
$("#img1").Jcrop({
/* aspectRatio:2/1, //这是宽高比*/
minSize:[600,300],//最小宽度，和高度
maxSize:[600,300],//最大宽度，和高度
setSelect:[0,0,600,300], //初始区域
/* bgColor:"#fff"颜色设置*/
/* bgOpacity:0.1 透明度设置*/
allowResize:false,
boxWidth:400 ,//同比缩放宽，和同比缩放高是一样的，一般来说设置一个就够了
onSelect:function (p) {//当选择完成时调用
console.log(p);
}/*,
onChange:function (p) {//选择事调用
},
onRelease:function () {//选择释放后执行
}*/
},function () {
jcrop_api=this;
});//这是调用，基础使用方法
$('button.setSelect').click(function () {
jcrop_api.setSelect([100,100,300,300]);
});
$('button.tellSelect').click(function () {
console.log(jcrop_api.tellSelect());
});
});
</script>
</head>
<body>
<button class="setSelect">setSelect</button>
<button class="tellSelect">tellSelect</button>
</body>
</html>
网友评论