Jcrop 简单使用

<!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>
![](tu.jpg)
<button class="setSelect">setSelect</button>
<button class="tellSelect">tellSelect</button>
</body>
</html>

推荐阅读更多精彩内容

  • 贪婪和自私,蛰伏在人性中,它让我们这个种族壮大和繁衍,但也让人情时不时窜出来一股子凉薄。谁都不是神仙,无法靠修养、...
    秋儿菇娘阅读 398评论 0 0
  • 我们经常会这样夸赞一个女生:你最近皮肤变得真好,是用什么护肤品还是谈恋爱了? 这也不是不无道理,有的女性在完成结婚...
    爱晚睡阅读 1,159评论 3 8
  • 17年8月8日晚,我在二十六楼的高处地震来了。 地震悄无声息地在这样风平浪静的时候登录了,没有任何的征兆,强烈的摇...
    四川一芬阅读 99评论 0 0
  • 在欢乐颂里,樊胜美有这几个标签,虚荣,拜金。 说实话,樊胜美很美,又会打扮,在外企工作,情商很高,很懂得与人交往,...
    竹叶腾1阅读 454评论 0 3