添加Cropper插件

app/data/controller/Config.php

@@ -39,7 +39,7 @@ class Config extends Controller
      * @auth true
      * @menu true
      */
-    public function jcrop()
+    public function cropper()
     {
         $this->title = '邀请二维码设置';
         $this->fetch();

app/data/view/config/cropper.html

@@ -0,0 +1,59 @@
+{extend name="../../admin/view/main"}
+
+{block name="content"}
+<div class="think-box-shadow" id="ContentBox">
+    <div class="padding-30">
+        <div class="text-left">
+            <p>1. 上传邀请码的背景图片（ 支持 PNG 和 JPG 格式 ）</p>
+            <p>2. 选择需要绘制二维码的区域，生成相对图片坐标参数</p>
+            <p>3. 保存位置数据，下次可直接显示</p>
+        </div>
+        <div class="margin-top-20 inline-block" style="max-width:800px">
+            <img alt="img" id="target" style="width:800px;height:400px" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
+            <div class="margin-top-5">
+                <label class="margin-top-5 block"><input id="inputImage" readonly value='' class="layui-input layui-bg-gray"></label>
+                <label class="margin-top-5 block"><input id="inputData" readonly value='' class="layui-input layui-bg-gray"></label>
+            </div>
+        </div>
+        <div class="margin-top-20">
+            <a class="layui-btn layui-btn-primary margin-right-5" data-type="png,jpg" data-upload-image>上传图片</a>
+            <span></span>
+            <a class="layui-btn layui-btn-primary margin-left-5" data-upload-update>保存设置</a>
+        </div>
+    </div>
+</div>
+
+<script>
+    // 默认数据，可以从数据库读取
+    var defaData = {"x": 401.54158425953585, "y": 167.1141879254591, "width": 25.413444821187255, "height": 25.413444821187255, "rotate": 0, "scaleX": 1, "scaleY": 1}
+
+    require(['cropper'], function (Cropper) {
+        (function (image, cropper) {
+            cropper = new Cropper(image, {
+                aspectRatio: 1,
+                ready() {
+                    if (typeof defaData === 'object') {
+                        cropper.setData(defaData);
+                    }
+                },
+                crop() {
+                    $('#inputImage').val(image.src);
+                    $('#inputData').val(JSON.stringify(cropper.getData()));
+                },
+            });
+            // 背景图片切换
+            $('[data-upload-image]').uploadFile(function (url) {
+                image.src = url;
+                cropper.replace(url, true).reset();
+            });
+        })(document.getElementById('target'));
+    });
+
+    $(window).on('resize', function () {
+        (function (height) {
+            $('#ContentBox').css('minHeight', height + 'px')
+        })($('.layui-layout-admin>.layui-body').height() - 120);
+    }).trigger('resize');
+
+</script>
+{/block}

app/data/view/config/jcrop.html

@@ -1,45 +0,0 @@
-{extend name="../../admin/view/main"}
-
-{block name="content"}
-<div class="think-box-shadow" id="ContentBox">
-
-    <div class="padding-30">
-        <img alt="" style="width:100%;height:auto" id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
-    </div>
-
-    <div class="margin-top-20 text-center">
-        <a class="layui-btn layui-btn-primary">上传图片</a>
-        <a class="layui-btn layui-btn-primary">保存设置</a>
-    </div>
-
-</div>
-<script>
-
-    require(['jquery.jcrop'], function () {
-
-        var jcropApi;
-
-        $('#target').Jcrop({
-            // onChange: showCoords,
-            // onSelect: showCoords,
-            // onRelease: clearCoords
-        }, function () {
-            jcropApi = this;
-        });
-
-        $('#coords').on('change', 'input', function (e) {
-            var x1 = $('#x1').val(), x2 = $('#x2').val();
-            var y1 = $('#y1').val(), y2 = $('#y2').val();
-            jcropApi.setSelect([x1, y1, x2, y2]);
-        });
-    });
-
-
-    $(window).on('resize', function () {
-        (function (height) {
-            $('#ContentBox').css('minHeight', height + 'px')
-        })($('.layui-layout-admin>.layui-body').height() - 120);
-    }).trigger('resize');
-
-</script>
-{/block}

public/static/admin.js

@@ -65,19 +65,20 @@ require.config({
         'base64': ['plugs/jquery/base64.min'],
         'upload': [tapiRoot + '/api.upload?.js'],
         'angular': ['plugs/angular/angular.min'],
+        'cropper': ['plugs/cropper/cropper.min'],
         'echarts': ['plugs/echarts/echarts.min'],
         'ckeditor': ['plugs/ckeditor/ckeditor'],
         'websocket': ['plugs/socket/websocket'],
         'pcasunzips': ['plugs/jquery/pcasunzips'],
-        'jquery.jcrop': ['plugs/jquery/jcrop/jcrop'],
         'jquery.ztree': ['plugs/ztree/ztree.all.min'],
+        'jquery.cropper': ['plugs/jquery/cropper.min'],
         'jquery.masonry': ['plugs/jquery/masonry.min'],
         'jquery.autocompleter': ['plugs/jquery/autocompleter.min'],
     },
     shim: {
         'excel': {deps: [baseRoot + 'plugs/layui_exts/excel.js']},
         'websocket': {deps: [baseRoot + 'plugs/socket/swfobject.min.js']},
-        'jquery.jcrop': {deps: ['jquery', 'css!' + baseRoot + 'plugs/jquery/jcrop/jcrop.css']},
+        'cropper': {deps: ['css!' + baseRoot + 'plugs/cropper/cropper.min.css']},
         'jquery.ztree': {deps: ['jquery', 'css!' + baseRoot + 'plugs/ztree/zTreeStyle/zTreeStyle.css']},
         'jquery.autocompleter': {deps: ['jquery', 'css!' + baseRoot + 'plugs/jquery/autocompleter.css']},
     }