<!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>
Jcrop 简单使用
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
