dcdev_demo
/
crop_image_demo.html

<!--
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com
-->

<!DOCTYPE html>
<html>

<head>
  <!------ 以下内容不要动 --------------------------------------------------------->
  <meta charset="UTF-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
  <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
    href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
  <!-- 页面标题 -->
  <title>数控开发</title> <!-- 桌面端浏览器及收藏夹图标 -->
  <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
  <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
  <!------ 以上内容不要动 --------------------------------------------------------->
  <!-- <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all"> -->

</head>

<body>

  <button onclick="aaa()"></button>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
  authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
  xhr_show_loading=1></script>
<script src="crop_image.js"></script>
<script>
  function aaa() {
    var data = {
      // 是否自动选择图片
      autoSelectImg: true,
      //canvas（图片）相关
      movable: true, //类型,//Boolean，默认值true。是否允许移动图片
      rotatable: true, //类型,//Boolean，默认值true。是否允许旋转图片。
      // scalable: true,//  默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
      zoomable: true, // 默认true, 是否允许缩放图片。
      zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
      zoomOnTouch: true, // 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
      //crop(裁剪框)相关
      aspectRatio: 1 / 1, //裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1
      modal: true, //类型:Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
      cropBoxMovable: true, //默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
      autoCrop: true, //类型:Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight:类型:Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
      guides: true, //类型:Boolean，默认值true。是否在剪裁框上显示虚线。
      center: true, // 默认true  是否显示裁剪框 中间的+
      cropBoxResizable: true, //是否允许改变裁剪框的大小
      imageInfo: function (res) { //返回所选图片的信息回调
        debugger;
      }
    };
    crop_image.crop(data, function (res) {
      debugger;
    })
  }
</script>

</html>