添加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']},
     }

public/static/plugs/cropper/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.5.11
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-02-17T11:53:21.992Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}